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

原生JS实现拖拽排序

news 2026/5/12 7:48:57

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

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

多智能体安全协调中的约束推断与CBF应用

1. 多智能体安全协调中的约束推断方法概述在分布式多智能体系统中&#xff0c;安全协调一直是个极具挑战性的问题。想象一下&#xff0c;当一群机器人在仓库中协同搬运货物时&#xff0c;每个机器人可能只知道部分环境信息&#xff08;比如某些障碍物的位置&#xff09;&#x…...

编程新知 2026/5/12 6:08:27

从OODA循环到代码实现：构建可自我优化的决策执行系统

1. 项目概述&#xff1a;一个决策循环系统的诞生最近在整理过往项目时&#xff0c;我重新审视了一个名为SimplixioMindSystem/decision-loop的内部工具。这个名字听起来可能有点抽象&#xff0c;但它的核心思想非常朴素&#xff1a;构建一个能够自我迭代、自我优化的决策执行闭…...

编程新知 2026/5/12 5:45:44

中文智能体协作框架agency-agents-zh：从原理到实战搭建多AI智能体系统

1. 项目概述&#xff1a;一个中文智能体协作框架的诞生最近在开源社区里&#xff0c;一个名为jnMetaCode/agency-agents-zh的项目引起了我的注意。作为一名长期关注AI应用落地的开发者&#xff0c;我深知“智能体”这个概念从学术论文走向实际工程应用&#xff0c;中间隔着巨大…...

编程新知 2026/5/12 5:25:32

大型机场U型机坪推出等待点运行优化【附案例】

✨ 长期致力于机场、U型机坪区、推出等待点、运行程序优化、启发式算法研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;单通道U型机坪推出等待点位优化…...

编程新知 2026/5/12 3:58:09

洛谷 P1305：新二叉树 ← DFS + 字符索引数组 + map

​【题目来源】 https://www.luogu.com.cn/problem/P1305 【题目描述】 输入一串二叉树&#xff0c;输出其前序遍历。 【输入格式】 第一行为二叉树的节点数 n。(1≤n≤26) 后面 n 行&#xff0c;第一个字母为节点&#xff0c;后两个字母分别为其左右儿子。特别地&#xff0c…...

编程新知 2026/5/12 3:20:57

图解人工智能（8）图灵测试作为智能与否的标准

有人不同意将图灵测试作为智能与否的标准。他们认为&#xff0c;就算机器表现得和人一样&#xff0c;也不能说机器拥有了智能&#xff0c;因为它只是一堆电路&#xff0c;和人的思维方式完全不同。你是否赞同这种说法&#xff1f;说说你赞同或反对的理由。开放讨论题。有几种观…...

编程新知 2026/5/12 2:30:37

New-API数据导出功能：轻松管理AI模型使用记录与账单数据

New-API数据导出功能&#xff1a;轻松管理AI模型使用记录与账单数据 【免费下载链接】new-api A unified AI model hub for aggregation & distribution. It supports cross-converting various LLMs into OpenAI-compatible, Claude-compatible, or Gemini-compatible for…...

编程新知 2026/5/12 1:58:55

构建可复用技能库：从代码片段到自动化工作流的工程实践

1. 项目概述&#xff1a;从零构建一套可复用的“副爪”技能库在技术社区里&#xff0c;我们常常会看到一些零散的代码片段、脚本工具或者临时的解决方案&#xff0c;它们像散落的“爪子”一样&#xff0c;能解决特定问题&#xff0c;但不成体系&#xff0c;难以复用和传承。我自…...

编程新知 2026/5/12 1:37:54

HandheldCompanion：解锁Windows掌机游戏体验的终极钥匙

HandheldCompanion&#xff1a;解锁Windows掌机游戏体验的终极钥匙 【免费下载链接】HandheldCompanion ControllerService 项目地址: https://gitcode.com/gh_mirrors/ha/HandheldCompanion 你是否曾为Windows掌机的游戏兼容性而烦恼&#xff1f;是否梦想着在便携设备上…...

编程新知 2026/5/12 0:41:58

STK Astrogator模块避坑指南：从Target Sequence优化失败到成功收敛的5个关键设置

STK Astrogator模块避坑指南&#xff1a;从Target Sequence优化失败到成功收敛的5个关键设置 轨道优化是航天任务设计中的关键环节&#xff0c;而STK的Astrogator模块作为行业标准工具&#xff0c;其Target Sequence功能既能实现复杂机动规划&#xff0c;也常因参数设置不当导致…...

编程新知 2026/5/12 0:06:38