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

原生JS实现拖拽排序

news 2026/2/9 21:06:44

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

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2026/2/8 14:57:14

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2026/2/7 10:59:19

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2026/1/29 3:00:56

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2026/1/31 12:52:04

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2026/2/4 10:28:25

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2026/1/31 11:18:29

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

编程新知 2026/1/24 4:39:04

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/7/10 0:32:50

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2026/2/5 4:33:51