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

前端拖拽API你会用了么

news 来源：原创 2025/6/16 13:12:39

大家好，今天跟大家分享一个小知识，前端页面的拖拽效果。这个效果可以说还是很常见的，比如说玩一些游戏的时候，将装备直接拖拽到一定区域就会丢掉或者装备上，再比如说一个列表，通过拖拽排序等。那么今天我们就从最简单的列表拖拽来了解它的实现。

认识一些拖拽API

API
`dragable = 'true'`	表示某个元素是可以拖动的（简单来说，元素有这个属性，就可以拖动了）
`ondragstart`	用于处理元素开始被拖动时触发的相关操作事件（字面意思，你在拖动它的时候，想让它干什么，在此时定义。比如改变`css`等）
`ondragenter`	被拖动的元素进入到有效的放置目标区域时触发（简单来说，我们拖拽的这个元素，进入到一个区域可行的区域的时候，此时会触发什么。比如我们游戏点击一个装备拖拽到区域内可以装上（此时还没有放手），来到这个区域有个提示可以装）
`ondragend`	事件会在被拖动的元素结束拖动操作时触发，也就是当用户松开鼠标按键（简单来说，你松开鼠标的时候要触发的事件定义在此。接着上个例子：装备拖到此区域，然后放手装上了）
【额外了解】
`e.target.nextElementSibling`	获取触发当前事件的那个元素的下一个同级兄弟元素（字母意思比较好理解，同时可以通过这个API去设置一个元素的下一个元素是什么，这个会在我们的这次测试中用到）
`insertBefore`	JavaScript操作DOM节点的方法，将一个节点插入到另一个指定节点之前

建立一个测试案例列表

这是一个比较好理解的简单的一个list列表，同时已经给每个元素加上了可拖拽API:dragable = 'true',也就是说，这个页面已经可以拖拽了

注意：拖拽的时候，鼠标是一个禁止的符号：大多数网页和应用程序都不能放置拖拽数据，想要成功必须取消dragenter 和 dragover 事件的默认处理行为。 e.prevetDefault()解决

设置ondragstart

我们希望在拖拽之后让被拖拽的元素样式和其被拖拽的区域样式是不同的，这样便于区分，也是为了让这个过程更具有分辨性。

注意：此时我们看到，我们拖拽的鼠标dom和 拖拽区域都改变了，是因为 鼠标拖拽的dom会根据拖拽的时候的原样式。这里我们要用到 事件循环机制 的原理，加一个定时器来减缓样式的改变。（了解事件循环机制：问：下面代码的宏任务微任务执行顺序是怎样的对于事件循环不知道有多少同学在面试的笔试题被它绕的团团转，作为js的处理事件的 - 掘金 (juejin.cn)）

修改后

设置ondragenter

这里我们设置的是，被拖动的元素进入到有效的放置目标区域时触发的情况。目标是：让我们的这些列表可以根据我当前的移动调整位置。

1. 初步测试：测试移动到相关的位置，输出一下

这里我们发现：移动的时候不仅会触发获取 dom的原来位置还会有父元素的位置，从优化方面来说，可以通过判断去除。（e.prevetDefault()解决大多数网页和应用程序都不能放置拖拽数据）

2. 获取当前元素的下标，通过判断 当前我拖拽dom的下标 和 要放置位置的下标 进行判断

nextElementSibling 和 insertBefore 修改位置

根据这两个API的作用，在 拖动dom的下标 和 放置区域的下标进行 判断，大于或小于情况分别使用(这里不对两个方法进行介绍了，大家可以自行搜索详细使用方式)

ondragend

收尾工作，放置后，如果不设置 ondragend ，被拖拽元素会回到原来样式（也就是我们改变后的样式），移除掉样式即可。此时整个的效果就达成了

最终效果

1. 拖拽到其他位置，并放下

2 2. 拖拽大数字，往上放

总结

总体来说，简单的去实现一个拖拽功能不会太难，主要是去把握住这几个API分别代表着什么作用，以及可以在其中可以做的一些操作。如果大家想自己练习一下，大家可以试试，如何把拖拽的dom 放到一个新的区域中去。

测试代码可见我的掘金代码：很常见的前端拖拽API，你会用了么大家好，今天跟大家分享一个小知识，前端页面的拖拽效果。这个效果可以说还是很常见的，比如 - 掘金 (juejin.cn)

前端拖拽API你会用了么

大家好，今天跟大家分享一个小知识，前端页面的拖拽效果。这个效果可以说还是很常见的，比如说玩一些游戏的时候，将装备直接拖拽到一定区域就会丢掉或者装备上，再比如说一个列表，通过拖拽排序等。那么今天我们…...

编程日记 2025/6/4 1:46:07

NVIDIA推出全新紧凑型超算，加速生成式AI发展，价格大幅下降

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/6/4 17:56:41

第100+33步 ChatGPT学习：时间序列EMD-ARIMA-LSTM模型

基于Python 3.9版本演示一、写在前面上一节，我们学了经验模态分解（Empirical Mode Decomposition，EMD）。如同结尾所说，“那么，做这些分解有什么作用呢？有大佬基于这些分解出来的序列分别作…...

编程日记 2025/6/2 11:00:07

Redis到底是单线程还是多线程？

Redis的线程模型是一个复杂的话题，它既包含了单线程的特性也引入了多线程的概念。理解这一点对于正确使用Redis和优化其性能至关重要。 1.单线程模型在早期版本中，Redis被设计为单线程模型，这意味着所有客户端请求的处理（包括网…...

编程日记 2025/6/4 4:18:44

Qt5与Qt6中的高DPI缩放属性解析

在Qt5中，高DPI缩放默认是禁用的。为了启用它，开发者需要设置Qt::AA_EnableHighDpiScaling应用程序属性。然而，在Qt6中，高DPI缩放默认是启用的，并且不能被禁用。这种变化使得开发者在处理高分辨率屏幕时更加方便&#x…...

编程日记 2025/6/2 23:12:05

[146 LRU缓存](https://leetcode.cn/problems/lru-cache/)

分析维护一个双向链表保存缓存中的元素。如果元素超过容量阈值，则删除最久未使用的元素。为了实现这个功能，将get(), put()方法获取的元素添加到链表首部。为了在O(1)时间复杂度执行get()方法，再新建一个映射表，缓存key与链表…...

编程日记 2025/6/2 11:00:05

顺序表-递增有序表合并

两个递增有序表合并操作题目： 将两个递增有序的顺序表 A 和 B 合并成一个新的递增有序顺序表 C。思路： 使用三个索引 i, j, k 分别遍历顺序表 A, B 和合并后的顺序表 C。比较 A 和 B 当前索引指向的元素，将较小的元素放入 C 中&#xf…...

编程日记 2025/6/1 18:55:28

从开始实现扩散概率模型 PyTorch 实现

目录一、说明二、从头开始实施三、线性噪声调度器四、时间嵌入五、下层DownBlock类块六、中间midBlock类块七、UpBlock上层类块八、UNet 架构九、训练十、采样十一、配置（Default.yaml） 十二、数据集 (MNIST) keyword： Diffusion…...

编程日记 2025/6/1 4:05:54

LabVIEW智能焊接系统

焊接作为制造业中的核心工艺，直接影响到产品的性能与可靠性。传统的焊接过程通常依赖操作工的经验控制参数，导致质量波动较大，效率低下且容易产生人为误差。随着工业自动化和智能制造的不断发展，传统焊接方法的局限性愈加明显。本…...

编程日记 2025/6/3 8:03:53

如何快速排查 Wi-Fi 的 TPUT 问题？

1. 如何排查 Wi-Fi TPUT 问题掌握每个 Wi-Fi 协议下的 Wi-Fi TPUT 的计算方法一文让你轻松理解WLAN物理层速率计算方式_wifi速率计算公式-CSDN博客配查 CPU 的资源占用率：interrupt、CPU loading Linux/Android 系统使用 mpstat 工具具体工具的使用方法&#xff…...

编程日记 2025/6/4 8:04:51

C语言单链表、双链表专题及应用

1.链表的概念及结构概念：链表是一种物理存储结构上非连续，非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链接次序实现的链表的结构跟火车车厢相似，淡季时车次的车厢会相应减少，旺季时车次的车厢会额外增…...

编程日记 2025/6/1 5:25:03

C++4--类

目录 1.类的引入 2.类的定义 3.类的访问限定符及封装 3.1访问的限定符 3.2封装 4.类的作用域 5.类的实体化 1.类的引入 C语言结构体中只能定义变量，在C中，结构体内不仅可以定义变量，也可以定义函数。比如：之间在数据结构中&…...

编程日记 2025/6/1 11:14:05

紫光展锐5G融云方案，开启云终端新时代

近年来，云终端凭借便捷、高效、高性价比的优势正逐步在各行各业渗透。研究机构IDC的数据显示，2024上半年，中国云终端市场总体出货量达到166.3万台，同比增长22.4%，销售额29亿元人民币，同比增长24.9%&#xf…...

编程日记 2025/6/2 15:43:33

雪泥鸿爪和屈指可数

paw这个单词，表示“爪或手”，是一个和hoof相对的单词： hoof n.(马等动物的)蹄paw n.爪子；(动物的)爪；(人的)手 v.挠，抓；动手动脚所以，当你理解了 paw 和 hoof 是相对的概念时&…...

编程日记 2025/6/3 5:38:50

C++并发与多线程（高级函数async）

async 在 C 中，async 关键字用于实现异步编程，它允许你定义异步操作，这些操作可以在后台执行，而不会阻塞当前线程。这是 C11 引入的特性，与 std::async 函数和 std::future 类一起使用。与thread函数模板的区别在于as…...

编程日记 2025/6/1 14:04:16

LeetCode 力扣热题 100道（二十）三数之和（C++）

给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ，同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。注意：答案中不可以包含重复的三元组。如下代码…...

编程日记 2025/5/28 11:06:19

类和对象（4）

大家好，今天来给大家介绍一下this引用，在学习类和对象的时候大家一定有一点疑惑吧，类为什么能知道我们传入的是哪个对象，又是怎么实例化我们的成员的，那么我们便来了解一下。四.this引用 4.1为什么要有this引用在…...

编程日记 2025/6/2 6:38:33

php基础：正则表达式

1.正则表达式正则表达式是用于描述字符排列和匹配模式的一种语法规则。它主要用于字符串的模式分割、匹配、查找及替换操作。到目前为止，我们前面所用过的精确（文本）匹配也是一种正则表达式。在PHP中，正则表达式一般是由正规字…...

编程日记 2025/5/30 22:03:12

Vue3动态表单实现

实现方法：通过<component />标签动实现动态表单渲染 component标签： 在vue中 component 标签用于动态组件标签的渲染。它允许在同一个挂载点上条件渲染不同的组件，通过is属性可以渲染指定的属性在上面的例子中，通过调用…...

编程日记 2025/5/31 20:16:40

【网络取证篇】取证实战之PHP服务器镜像网站重构及绕密分析

【网络取证篇】取证实战之PHP服务器镜像网站重构及绕密分析在裸聊敲诈、虚假理财诈骗案件类型中，犯罪分子为了能实现更低成本、更快部署应用的目的，其服务器架构多为常见的初始化网站架构，也称为站库同体服务器！也就是说网站应用…...

编程日记 2025/6/3 13:48:47

高数 | 用简单的话讲考研数学知识点（第一集：充分和必要）

目录一、前言二、充分和必要三、基础符号四、符号拓展五、符号进阶六、符号进阶拓展七、本集总结一、前言 up最近想去上学，就想考个研究生读一读，那就要复习高数，光复习挺没意思的，所以就想着边复习边写文章吧&…...

编程日记 2025/6/4 10:36:29

前端学习-操作元素内容（二十二）

目录前言目标对象.innerText 属性对象.innerHTML属性案例年会抽奖需求方法一方法二总结前言曾经沧海难为水，除却巫山不是云。目标能够修改元素的文本更换内容 DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象，…...

编程日记 2025/6/1 9:48:50

PostgreSql-学习06-libpq之同步命令处理

目录一、环境二、介绍三、函数 1、PQsetdbLogin （1）作用 （2）声明 （3）参数介绍 （4）检测成功与否 2、PQfinish （1）作用 （2&#xff0…...

编程日记 2025/6/1 6:15:22

Python `str.strip()` 的高级用法详解

Python str.strip 的高级用法详解 1. str.strip() 的基本用法2. str.strip() 的高级用法2.1 移除指定字符2.2 移除多个指定字符2.3 移除换行符和制表符2.4 结合正则表达式的高级处理 3. lstrip() 和 rstrip() 的用法3.1 lstrip()：移除左端字符3.2 rstrip()&#xff…...

编程日记 2025/6/4 11:23:34

Vue 3 中的 `update:modelValue` 事件详解

在 Vue 3 中，update:modelValue 事件通常与 v-model 指令一起使用，以实现自定义组件的双向数据绑定。以下是对该事件的详细分析： 事件定义首先，我们需要在组件中定义 update:modelValue 事件。可以使用 defineEmits 函…...

编程日记 2025/6/3 19:52:13

AI 助力医学伦理知情同意书的完善：守护受试者权益

在医学研究中，知情同意书是保障受试者权益的核心文件，其质量直接关系到研究的伦理合规性。一份完善的知情同意书应清晰、准确且全面地向受试者传达研究的关键信息，确保他们在充分理解的基础上自愿做出参与决策。然而，在实际撰写过…...

编程日记 2025/6/1 5:53:45

【信息系统项目管理师-论文真题】2017上半年论文详解（包括解题思路和写作要点）

更多内容请见：备考信息系统项目管理师-专栏介绍和目录文章目录试题一：论信息系统项目的范围管理解题思路写作要点试题二：论项目采购管理解题思路写作要点试题一：论信息系统项目的范围管理实施项目范围管理的目的是包括确保项目做且制作所需的全部工作，以顺利完成项目…...

编程日记 2025/6/2 2:58:48

rpc设计的再次思考20251215(以xdb为核心构建游戏框架)

1.服务提供者注册的方式 // 表明这是一个服务提供者，ServerType 和 ServerId从application.properties中读取 // 而且只有当当前服务是Game时，才生效。或者条件注解??? RpcProvider(typeServerType.Game) public class GameProvider{MsgReceiver…...

编程日记 2025/6/3 16:03:16

mysql 查看并设置 innodb_flush_log_at_trx_commit 参数

mysql 查看并设置 innodb_flush_log_at_trx_commit 参数 innodb_flush_log_at_trx_commit 是 MySQL 中的一个系统变量，用于控制 InnoDB 存储引擎的日志刷新行为。该变量有三个可选的值： 0：每隔一秒钟，日志缓冲被刷新到日志文件&a…...

编程日记 2025/6/4 17:56:23

spring使用rabbitmq当rabbitmq集群节点挂掉 spring rabbitmq怎么保证高可用，rabbitmq网络怎么重新连接

##spring rabbitmq代码示例 Controller代码 import com.alibaba.fastjson.JSONObject; import com.newland.mi.config.RabbitDMMQConfig; import org.springframework.amqp.core.Message; import org.springframework.amqp.core.MessageProperties; import org.springframewo…...

编程日记 2025/6/4 6:21:04