当前位置： 首页 > news >正文

原生JS实现拖拽排序

news 2025/12/8 23:24:32

拖拽（这两个字看了几遍已经不认识了）

说到拖拽，应用场景不可谓不多。无论是打开电脑还是手机，第一眼望去的界面都是可拖拽的，靠拖拽实现APP或者应用的重新布局，或者拖拽文件进行操作文件。

先看效果图，如何实现一个如图HTML元素的拖拽，并排序

HTML中的拖拽事件（drag & drop）

参考MDN中文文档

事件类型

  • drag ： 当拖拽的元素或者选中的文本时触发* dragend ： 当拖拽元素结束时触发* dragenter ： 当拖拽元素或选中的文本到一个可释放目标时触发* dragleave ： 当拖拽元素或选中的文本离开一个可释放目标时触发* dragover ： 当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）* dragstart ： 当用户开始拖拽一个元素或选中的文本时触发* drop ： 当元素或选中的文本在可释放目标上被释放时触发Coding

写一段简单的CSS和html ，实现初始的页面

css*{margin: 0;padding: 0;box-sizing: border-box;}ul{margin: 200px auto;width: 200px;list-style-type: none;}li{margin: 5px;text-align: center;width: 200px;height: 30px;background: skyblue;}.list .moving{background: transparent;color: transparent;border: 1px dashed #ccc;} 

html<ul class="list"><li >1</li><li >2</li><li >3</li><li >4</li><li >5</li></ul>

此时我们的页面如下图

现在还不可以进行拖拽操作，为了可以实现拖拽操作，我们必须给每个元素设置 draggable=“true”

 <ul class="list"><li draggable="true">1</li><li draggable="true">2</li><li draggable="true">3</li><li draggable="true">4</li><li draggable="true">5</li></ul>

元素已经可以基础的拖拽

接下来我们需要在JS中对DOM元素进行一系列操作来实现对应的效果

1.实现拖出去的元素，原位置样式变为透明虚线
2.实现拖动到其他元素上时，列表顺序发生改变

 let list = document.querySelector('.list')let currentLi// 记录拖拽元素

我们用事件委托，监听 “dragstart” 事件，给拖动的元素添加类名，修改样式，这里会出现奇怪的一幕就是，拖动的样式和原来的样式同时变成了透明。

 list.addEventListener('dragstart',(e)=>{e.dataTransfer.effectAllowed = 'move' // 拖动样式改为 "move"currentLi = e.targetcurrentLi.classList.add('moving')})

这里会出现奇怪的一幕就是，拖动的样式和原来的样式同时变成了透明。这是因为跟随鼠标拖动的元素的样式在拖动的那一刻是原始元素的样式，所以也会添加"moving"， 那么在这里我们加一个异步

 list.addEventListener('dragstart',(e)=>{e.dataTransfer.effectAllowed = 'move'currentLi = e.targetsetTimeout(()=>{currentLi.classList.add('moving')})})

到这里距离目标又更近了一步，

接下来我们需要在拖动的过程中对列表的元素进行重新的排序

Node.insertBefore()：方法在参考节点之前插入一个拥有指定父节点的子节点

 list.addEventListener('dragenter',(e)=>{e.preventDefault()// 阻止默认事件if(e.target === currentLi||e.target === list){ // 当移动到当前拖动元素，或者父元素上面我们不做操作return}let liArray = Array.from(list.childNodes)let currentIndex = liArray.indexOf(currentLi) // 获取到拖动元素的下标let targetindex = liArray.indexOf(e.target) // 获取到目标元素的下标if(currentIndex<targetindex){list.insertBefore(currentLi,e.target.nextElementSibling)}else{list.insertBefore(currentLi,e.target)}})

最后我们需要在拖拽结束将元素的moving类名移除,以及阻止拖拽到一个目标上的默认事件（否则会出现禁止）

 list.addEventListener('dragover',(e)=>{e.preventDefault()})list.addEventListener('dragend',(e)=>{currentLi.classList.remove('moving')})

至此，一个简单的拖拽排序功能就实现了

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> *{margin: 0;padding: 0;box-sizing: border-box;}ul{margin: 200px auto;width: 200px;list-style-type: none;}li{margin: 5px;text-align: center;width: 200px;height: 30px;background: skyblue;}.list .moving{background: transparent;color: transparent;border: 1px dashed #ccc;} </style>
</head>
<body><ul class="list"><li draggable="true">1</li><li draggable="true">2</li><li draggable="true">3</li><li draggable="true">4</li><li draggable="true">5</li></ul><script> let list = document.querySelector('.list')let currentLilist.addEventListener('dragstart',(e)=>{e.dataTransfer.effectAllowed = 'move'currentLi = e.targetsetTimeout(()=>{currentLi.classList.add('moving')})})list.addEventListener('dragenter',(e)=>{e.preventDefault()if(e.target === currentLi||e.target === list){return}let liArray = Array.from(list.childNodes)let currentIndex = liArray.indexOf(currentLi)let targetindex = liArray.indexOf(e.target)if(currentIndex<targetindex){ list.insertBefore(currentLi,e.target.nextElementSibling)}else{list.insertBefore(currentLi,e.target)}})list.addEventListener('dragover',(e)=>{e.preventDefault()})list.addEventListener('dragend',(e)=>{currentLi.classList.remove('moving')}) </script>
</body>
</html>

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。



有需要的小伙伴，可以点击下方卡片领取，无偿分享

相关文章：

原生JS实现拖拽排序

拖拽&#xff08;这两个字看了几遍已经不认识了&#xff09; 说到拖拽&#xff0c;应用场景不可谓不多。无论是打开电脑还是手机&#xff0c;第一眼望去的界面都是可拖拽的&#xff0c;靠拖拽实现APP或者应用的重新布局&#xff0c;或者拖拽文件进行操作文件。 先看效果图&am…...

编程日记 2023/3/1 20:49:53

Coredump-N: corrupted double-linked list

文章目录 问题安装debuginfo之后分析参数确定确定代码逻辑解决问题 今天碰到一例： #0 0xf7f43129 in __kernel_vsyscall () #1 0xf6942b16 in raise () from /lib/libc.so.6 #2 0xf6928e64 in abort () from /lib/libc.so.6 #3 0xf6986e8c in __libc_message () from /lib/li…...

编程日记 2023/3/1 20:48:49

5个好用的视频素材网站

推荐五个高质量视频素材网站&#xff0c;免费、可商用&#xff0c;赶紧收藏起来&#xff01; 1、菜鸟图库 视频素材下载_mp4视频大全 - 菜鸟图库 网站素材非常丰富&#xff0c;有平面、UI、电商、办公、视频、音频等相关素材&#xff0c;视频素材质量很高&#xff0c;全部都是…...

编程日记 2023/3/1 20:47:38

使用码匠连接一切｜二

目录 Elasticsearch Oracle ClickHouse DynamoDB CouchDB 关于码匠 作为一款面向开发者的低代码平台&#xff0c;码匠提供了丰富的数据连接能力&#xff0c;能帮助用户快速、轻松地连接和集成多种数据源&#xff0c;包括关系型数据库、非关系型数据库、API 等。平台提供了…...

编程日记 2023/3/1 20:46:32

3.1.1 表的相关设计

文章目录1.表中实体与实体对应的关系2.实际案例分析3.表的实际创建4.总结1.表中实体与实体对应的关系 一对多 如一个班级对应多名学生&#xff0c;一个客户拥有多个订单等这种类型表的建表要遵循主外键关系原则&#xff0c;即在从表创建一个字段&#xff0c;此字段作为外键指向…...

编程日记 2023/3/1 20:45:26

Vue3 企业级项目实战：认识 Spring Boot

Vue3 企业级项目实战 - 程序员十三 - 掘金小册Vue3 Element Plus Spring Boot 企业级项目开发&#xff0c;升职加薪&#xff0c;快人一步。。「Vue3 企业级项目实战」由程序员十三撰写&#xff0c;2744人购买https://s.juejin.cn/ds/S2RkR9F/ 越来越流行的 Spring Boot Spr…...

编程日记 2023/3/1 20:44:21

Swagger2实现配置Header请求头

效果 实现 大家使用swagger肯定知道在代码中会写一个 SwaggerConfig 配置类&#xff0c;如果没有这个类swagger指定也用不起来&#xff0c;所以在swagger中配置请求头也是在这个 SwaggerConfig 中操作。 1、要实现配置请求头在配置swagger的Docket的bean实例中添加一个 globa…...

编程日记 2023/3/1 20:43:10

4-1 SpringCloud快速开发入门:RestTemplate类详细解读

RestTemplate类详细解读 RestTemplate 的 GET 请求 Get 请求可以有两种方式&#xff1a; 第一种&#xff1a;getForEntity 该方法返回一个 ResponseEntity对象&#xff0c;ResponseEntity是 Spring 对 HTTP 请求响应的封装&#xff0c;包括了几个重要的元素&#xff0c;比如响…...

编程日记 2023/3/1 20:42:05

【IDEA】【工具】幸福感UP！开发常用的工具 插件/网站/软件

IDEA 插件 CodeGlance Pro —— 代码地图 CodeGlance是一款非常好用的代码地图插件&#xff0c;可以在代码编辑区的右侧生成一个竖向可拖动的代码缩略区&#xff0c;可以快速定位代码的同时&#xff0c;并且提供放大镜功能。 使用:可以通过Settings—>Other Settings—&g…...

编程日记 2023/3/1 20:40:59

【蓝桥杯集训·每日一题】AcWing 1562. 微博转发

文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴宽搜BFS一、题目 1、原题链接 1562. 微博转发 2、题目描述 微博被称为中文版的 Twitter。 微博上的用户既可能有很多关注者&#xff0c;也可能关注很多其他用户。 因此&am…...

编程日记 2023/3/1 20:39:47

[busybox] busybox生成一个最精简rootfs(下)

书接上回&#xff1a;[busybox] busybox生成一个最精简rootfs(上) 本篇介绍几个rootfs中用到的“不是那么重要的”几个文件。 9 /etc/shadow 和 /etc/passwd 曾经&#xff0c;/etc/passwd 文件用于存储独立 Linux 系统中的所有登录信息。 后来&#xff0c;由于以下原因&…...

编程日记 2023/3/1 20:38:38

Java奠基】运算符的讲解与使用

目录 运算符与表达式的使用 算术运算符 隐式转换与强制转换 自增自减运算符 赋值运算符 关系运算符 逻辑运算符 三元运算符 运算符与表达式的使用 运算符是指&#xff1a;对字面量或者变量进行操作的符号。 表达式是指&#xff1a;用运算符把字面量或者变量连接起来&…...

编程日记 2023/3/1 20:37:32

开发一个会员管理系统

背景 由于现在公司内客户量剧增&#xff0c; 简单的靠电话及笔记本记录&#xff0c;来维护客户有些困难&#xff0c;但又不想去花钱购买那些专业版的会员管理系统&#xff0c;只能自己动手撸一个相对简易的会员系统来使用了。 开发语言及使用技术 后端&#xff1a;java、mys…...

编程日记 2023/3/1 20:36:25

华为OD机试题【找出通过车辆最多颜色】用 C++ 进行编码 （2023.Q1）

最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为od机试，独家整理 已参加机试人员的实战技巧文章目录 最近更新的博客使用说明找出通…...

编程日记 2023/3/1 20:35:18

如何根据子网掩码计算出网络前缀（prefix）

我们知道子网掩码是对IP地址的网络地址的标注。把IP地址中网络地址位设置为1，主机地址位设置为0，得到的就是子网掩码。除了用子网掩码表示IP地址的网络地址和主机地址外，还可以用network prefix（网络前缀），比如192.168.0.1/16，这里的16就是prefix，也就是网络地址位的位…...

编程日记 2023/3/1 20:34:13

【FATE联邦学习】Fateboard的使用

fateboard文档 https://fate.fedai.org/fateboard/ github Fateboard文档 https://github.com/FederatedAI/FATE-Board/blob/master/README-CN.md 背景 Fateboard是FATE框架的任务看板。 在配置FATE时&#xff0c;Fateboard一般是被安装好了的&#xff0c;安装过程查看这里 A…...

编程日记 2023/3/1 20:33:07

解决vue3没有this造成的无法使用vue2

在Vue2项目中可以使用this.$router.push等方法进行路由的跳转&#xff0c;但是在Vue3的setup函数里&#xff0c;并没有this这个概念&#xff0c;因此如何使用路由方法 1.// 在新的vue-router里面尤大加入了一些方法&#xff0c;比如这里代替this的useRouter&#xff0c;具体使用…...

编程日记 2023/3/1 20:31:57

百度前端二面vue面试题指南

Vue 组件间通信有哪几种方式&#xff1f; ​ Vue 组件间通信是面试常考的知识点之一&#xff0c;这题有点类似于开放题&#xff0c;你回答出越多方法当然越加分&#xff0c;表明你对 Vue 掌握的越熟练。Vue 组件间通信只要指以下 3 类通信&#xff1a;父子组件通信、隔代组件通…...

编程日记 2023/3/1 20:30:48

【备战面试】每日10道面试题打卡-Day1

本篇总结的是Java基础知识相关的面试题&#xff0c;后续也会更新其他相关内容 文章目录1、JVM、JRE和JDK的关系&#xff1f;2、Java语言有哪些特点&#xff1f;3、Java和C的区别有哪些&#xff1f;4、Java有哪些数据类型&#xff1f;5、访问修饰符 public、private、protected&…...

编程日记 2023/3/1 20:29:40

服务器重启后jar包自动重启

1、创建自动启动脚本 vi /etc/rc.d/auto_start_script.sh #!/bin/bash #添加本地Java环境&#xff0c;这两句必须添加&#xff01;不然报错&#xff0c;找不到java命令 export JAVA_HOME/java/jdk1.8.0_181 export PATH$JAVA_HOME/bin:$PATH #系统引导后延迟5秒执行脚本&#x…...

编程日记 2023/3/1 20:28:33

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/12/7 13:41:33

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/12/8 7:56:16

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/12/5 5:10:56

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/12/5 7:15:20

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/10/5 6:41:51

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/12/8 22:39:20

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/12/6 0:00:04

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/11/27 17:18:52

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/11/25 22:42:21

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/12/5 5:21:34