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

原生JS实现拖拽排序

news 2025/7/11 6:14:23

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

说到拖拽，应用场景不可谓不多。无论是打开电脑还是手机，第一眼望去的界面都是可拖拽的，靠拖拽实现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

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/7/7 19:48:55

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2025/7/5 22:29:13

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/7/10 2:41:30

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/6/16 13:45:11

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/6/19 5:33:21

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/7/9 23:26:09

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/6/21 16:18:00

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

编程新知 2025/7/7 22:32:11

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2025/7/8 3:05:37

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2025/7/8 19:39:41