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

js实现拖拽功能

news 2026/2/9 22:49:37

基于onMouseDown 、onMouseMove 、onMouseUp

使用 mousedown、mousemove 和 mouseup 事件来实现拖拽的基本思路是：

  1. 在 mousedown 事件中，开始追踪拖拽操作并记录鼠标按下的位置。

  2. 在 mousemove 事件中，根据鼠标的移动，更新被拖拽元素的位置。

  3. 在 mouseup 事件中，停止拖拽操作，清除事件监听器，以及执行必要的清理操作。

以下是一些关键的步骤和注意事项：

实现拖拽的步骤：

  1. 在元素上监听 mousedown 事件。当鼠标按下时，标记拖拽操作的开始。

  2. 在 mousedown 事件处理程序中，记录鼠标按下时的初始位置（通常是相对于被拖拽元素的偏移量）。这将帮助你计算鼠标相对于元素的位置。

  3. 添加 mousemove 事件监听器。在 mousemove 事件处理程序中，计算鼠标位置的变化，并根据变化来更新被拖拽元素的位置。

  4. 在 mouseup 事件处理程序中，停止拖拽操作。清除 mousemove 和 mouseup 事件监听器，以确保不再处理鼠标移动和释放事件。

注意事项：

  1. 记录鼠标偏移：确保在 mousedown 事件处理程序中记录鼠标按下时的初始位置。这将帮助你计算鼠标相对于元素的位置，以正确更新元素的位置。

  2. 防止文字选中：在拖拽元素上防止文字的选中，可以使用 CSS 的 user-select: none; 样式或在 mousedown 事件中取消选择文字的默认行为。

  3. 移动边界：确保在 mousemove 事件处理程序中更新元素的位置时，限制元素的移动范围，以防止它移出可见区域或父元素的边界。

  4. 清理：在 mouseup 事件处理程序中，清除事件监听器，以避免内存泄漏或不必要的事件处理。

  5. 可访问性：考虑到可访问性，确保你的拖拽操作不会影响键盘用户。同时，确保在视觉上指示被拖拽元素的状态。

  6. 兼容性：确保你的拖拽实现在不同浏览器中正常工作，可能需要处理一些浏览器特定的问题或事件。

以下是一个简单的示例，演示了如何使用 mousedown、mousemove 和 mouseup 事件来实现一个可拖拽的元素：

const element = document.getElementById('draggableElement');
let isDragging = false;
let offsetX, offsetY;element.addEventListener('mousedown', (e) => {isDragging = true;offsetX = e.clientX - element.getBoundingClientRect().left;offsetY = e.clientY - element.getBoundingClientRect().top;element.style.cursor = 'grabbing';
});document.addEventListener('mousemove', (e) => {if (isDragging) {element.style.left = e.clientX - offsetX + 'px';element.style.top = e.clientY - offsetY + 'px';}
});document.addEventListener('mouseup', () => {isDragging = false;element.style.cursor = 'grab';
});

另外注意：

  1. 绝对定位： 通常，要实现拖拽效果，需要将元素设置为绝对定位，这样它可以脱离文档流，使其能够在页面上自由移动。这是拖拽操作的一个基本前提。

  2. 事件绑定： 拖拽元素的 mousedown 事件和 mousemove 事件通常绑定在 document 上，而不是拖拽元素本身。这是因为拖拽元素可能会在页面上移动，而 document 会捕获全局的鼠标事件，确保无论鼠标在哪里释放，都可以正确处理拖拽操作。

<!DOCTYPE html>
<html>
<head><style>.draggable {width: 100px;height: 100px;background-color: lightblue;text-align: center;line-height: 100px;position: absolute;cursor: grab;}</style>
</head>
<body><div class="draggable" id="myElement">拖拽我</div><script>const element = document.getElementById('myElement');let isDragging = false;let offsetX, offsetY;element.addEventListener('mousedown', (e) => {isDragging = true;offsetX = e.clientX - element.getBoundingClientRect().left;offsetY = e.clientY - element.getBoundingClientRect().top;element.style.cursor = 'grabbing';});document.addEventListener('mousemove', (e) => {if (isDragging) {element.style.left = e.clientX - offsetX + 'px';element.style.top = e.clientY - offsetY + 'px';}});document.addEventListener('mouseup', () => {isDragging = false;element.style.cursor = 'grab';});</script>
</body>
</html>

Web API 提供了内置的拖放

Web API 提供了内置的拖放功能，主要涉及到以下事件和方法，以及一些注意事项：

拖放的思路：

  1. ondragstart 事件： 当你想要元素成为可拖拽的源时，你可以监听 ondragstart 事件，该事件在用户开始拖动元素时触发。你可以设置 dataTransfer 对象的数据，以便在拖放操作中传递信息。

  2. ondragover 事件： 当你希望元素成为拖放目标时，你可以监听 ondragover 事件，该事件在拖动元素悬停在目标元素上时触发。你可以通过 ondragover 事件的默认行为阻止拒绝拖放，或者通过 JavaScript 来决定是否接受拖放操作。

  3. ondrop 事件： 当你希望在目标元素上接受拖放操作时，你可以监听 ondrop 事件，该事件在用户完成拖放操作时触发。在 ondrop 事件处理程序中，你可以访问拖放数据，执行相应的操作，以及取消默认行为。

注意事项：

  1. 阻止默认行为： 如果你希望某个元素成为拖放源或目标，通常需要在 ondragstart 和 ondragover 事件处理程序中使用 event.preventDefault() 阻止默认行为，以便正确处理拖放。

  2. 数据传递： 使用 dataTransfer 对象来传递数据，这可以是文本、URL、自定义数据等。在 ondragstart 事件中设置数据，然后在 ondrop 事件中获取数据。

  3. 拖放目标状态： 使用 ondragenter 和 ondragleave 事件来处理拖放目标的状态变化。这些事件在拖动元素进入和离开目标元素时触发。

  4. 拖放效果： 你可以使用 dataTransfer.effectAllowed 和 dataTransfer.dropEffect 来指定拖放操作的效果，如移动、复制或链接。这有助于提供用户反馈。

  5. 跨浏览器兼容性： 考虑跨浏览器兼容性，因为不同浏览器可能会有一些差异，特别是在数据格式方面。

  6. 拖放元素样式： 为了提供视觉效果，你可以在 ondragstart 事件中更改拖放元素的样式，以使用户知道它可以被拖动。

代码示例：

<!DOCTYPE html>
<html>
<head><style>.draggable {width: 100px;height: 100px;background-color: lightblue;text-align: center;line-height: 100px;position: absolute;cursor: grab;}.droppable {width: 200px;height: 200px;background-color: lightgray;position: absolute;top: 150px;left: 150px;}</style>
</head>
<body><divclass="draggable"draggable="true"ondragstart="dragStart(event)">拖拽我</div><divclass="droppable"ondragover="dragOver(event)"ondrop="drop(event)">放置区域</div><script>function dragStart(event) {event.dataTransfer.setData("text", event.target.id);event.target.style.cursor = 'grabbing';}function dragOver(event) {event.preventDefault();}function drop(event) {event.preventDefault();const data = event.dataTransfer.getData("text");const draggableElement = document.getElementById(data);event.target.appendChild(draggableElement);draggableElement.style.cursor = 'grab';}</script>
</body>
</html>

在这个示例中，创建了两个元素：一个可拖拽的元素（draggable）和一个接受拖动的目标元素（droppable）。draggable 元素被标记为可拖拽（draggable=“true”），并且定义了 ondragstart 事件处理程序，它在拖拽开始时触发。

droppable 元素定义了 ondragover 和 ondrop 事件处理程序，它们用于处理拖放区域的事件。ondragover 阻止默认行为，以允许元素可以放置在该区域，而 ondrop 处理实际的拖放操作，将拖拽的元素追加到目标元素中。

在学习时看到其他值得一看的文章，把 HTML 拖放 API描述的很详细

相关文章：

js实现拖拽功能

基于onMouseDown 、onMouseMove 、onMouseUp 使用 mousedown、mousemove 和 mouseup 事件来实现拖拽的基本思路是&#xff1a; 在 mousedown 事件中&#xff0c;开始追踪拖拽操作并记录鼠标按下的位置。 在 mousemove 事件中&#xff0c;根据鼠标的移动&#xff0c;更新被拖拽…...

编程日记 2023/10/18 6:06:22

数据库主从切换过程中Druid没法获取连接错误

背景&#xff1a; 今天dba在进行DB的主从切换&#xff0c;导致应用一直报错&#xff0c;获取不到DB连接&#xff0c;druid的错误信息如下&#xff1a; Could not open JDBC Connection for transaction; nested exception is com.alibaba.druid.pool.GetConnectionTimeoutExc…...

编程日记 2023/10/18 6:05:22

【iOS】Mac M1安装iPhone及iPad的app时设置问题

【iOS】Mac M1安装iPhone及iPad的app时设置问题 简介一&#xff0c;设置问题二&#xff0c;适配问题 简介 由于 苹果M1芯片的Mac可用安装iPhone以及iPad应用&#xff0c;因为开发者并没有适配Mac&#xff0c;因此产生了很多奇怪问题&#xff0c;这里总结归纳Mac M1安装iPhone和…...

编程日记 2023/10/18 6:04:21

Springboot 启动报错@spring.active@解析错误

Caused by: org.yaml.snakeyaml.scanner.ScannerException: while scanning for the next token found character that cannot start any token. (Do not use for indentation)in reader, line 10, column 13:active: spring.active^查看是否勾选...

编程日记 2023/10/18 6:03:20

【算法挨揍日记】day15——560. 和为 K 的子数组、974. 和可被 K 整除的子数组

560. 和为 K 的子数组 560. 和为 K 的子数组 题目描述&#xff1a; 给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的连续子数组的个数 。 子数组是数组中元素的连续非空序列。 解题思路&#xff1a; 我们可以很容易想到暴力解法&#xf…...

编程日记 2023/10/18 6:02:19

数字时代的探索与革新：Socks5代理的引领作用

在当今快速发展的数字时代&#xff0c;技术创新推动着社会的变革与进步。Socks5代理作为一项重要的网络技术&#xff0c;正引领着跨界电商、爬虫数据分析、企业全球化和游戏体验优化等领域的发展。本文将深入探讨Socks5代理技术在这些领域中的引领作用&#xff0c;以及它如何塑…...

编程日记 2023/10/18 6:01:18

算法-堆/归并排序-排序链表

算法-堆/归并排序-排序链表 1 题目概述 1.1 题目出处 https://leetcode.cn/problems/sort-list/description/?envTypestudy-plan-v2&envIdtop-interview-150 1.2 题目描述 2 优先级队列构建大顶堆 2.1 思路 优先级队列构建小顶堆链表所有元素放入小顶堆依次取出堆顶…...

编程日记 2023/10/18 6:00:17

word 如何编写4x4矩阵

百度上给的教程&#xff0c;打印出来没有对齐 https://jingyan.baidu.com/article/6b182309995f8dba58e159fc.html 百度上的方式试了一下&#xff0c;不会对齐。导致公式看起来很奇怪。 下面方式会自动对齐 摸索了一下发现可以用下面这种方式编写 4x4 矩阵。先创建一个 3x3…...

编程日记 2023/10/18 5:59:16

INTELlij IDEA编辑VUE项目

菜单中选择setting–>Plugins 或者快捷键 ctrlalts 搜索vue&#xff0c;但有些情况会搜索不出来&#xff0c;先说搜索到的情况 如下图所示&#xff1a; 如果没有vue.js则说明过去已经安装了。 搜索到了后点击Install安装即可&#xff0c; 但即使搜索成功了&#xff0c;也不…...

编程日记 2023/10/18 5:57:13

linux进程间通讯--信号量

1.认识信号量 方便理解&#xff1a;信号量就是一个计数器。当它大于0能用&#xff0c;小于等于0&#xff0c;用不了&#xff0c;这个值自己给。 2.特点&#xff1a; 信号量用于进程间同步&#xff0c;若要在进程间传递数据需要结合共享内存。信号量基于操作系统的 PV 操作&am…...

编程日记 2023/10/18 5:56:12

VS Code连接远程Linux服务器开发c++项目

1.在远程 Linux 上安装包 yum groupinstall "development tools" -y yum install cmake -y2.在 VSCode 上安装插件 C/CC/C Extension PackCMakeCMake ToolsCMake Language Support 3.连接远程Linux服务器...

编程日记 2023/10/18 5:55:11

stable diffusion的模型选择，采样器选择，关键词

一、Stable Diffusion的模型选择&#xff1a; 模型下载地址&#xff1a;https://civitai.com/&#xff0c;需要科学上网。 Deliberate&#xff1a;全能模型&#xff0c;prompt越详细生成的图片质量越好Realistic Vision&#xff1a;现实模型&#xff0c;生成仿真式图片&#…...

编程日记 2023/10/18 5:54:10

BI零售数据分析：以自身视角展开分析

随着零售业务不断扩展&#xff0c;市场竞争不断加剧&#xff0c;各层级的销售管理人员都急需一张能快速查看销售数据分析报表&#xff0c;能从中知道自己管辖内的业务最近或过去的情况&#xff0c;并依次为依据科学优化销售管理措施。这就要求零售数据分析报表信息足够多、数据…...

编程日记 2023/10/18 5:52:09

Maven 使用教程（三）

一、如何使用外部依赖项&#xff1f; 您可能已经注意到POM中的一个dependencies元素&#xff0c;我们一直在使用它作为示例。事实上&#xff0c;您一直在使用外部依赖项&#xff0c;但在这里我们将更详细地讨论它是如何工作的。有关更全面的介绍&#xff0c;请参阅我们的依赖机…...

编程日记 2023/10/18 5:50:07

行秋找工作的记录

2023-10-17 15:35-16:00 中移&#xff08;苏州&#xff09;研发中心面试 问了项目&#xff0c;还有一些我没准备到的Java八股文&#xff1a;Java类的加载过程&#xff0c;发射机制&#xff0c;redis存储结构&#xff0c;二叉平衡树等。但我也都没回答上来。应该无了。 2023-1…...

编程日记 2023/10/18 5:48:05

vue项目打包，使用externals抽离公共的第三方库

封装了一个插件&#xff0c;用来vue打包抽离公共的第三方库&#xff0c;使用unplugin进行插件开发&#xff0c;vite对应的功能使用了vite-plugin-externals进行二次开发 github地址 npm地址 hfex-auto-externals-plugin 自动注入插件,使用 unplugin 和 html-webpack-plugin进…...

编程日记 2023/10/18 5:46:02

九阳真经之各大厂校招

大学计算机系的同学要怎么努力才能校招进大厂? 秋招的大公司非常多&#xff0c;也是非常好的&#xff0c;赶上了秋招&#xff0c;你基本工作就敲定了&#xff0c;在整个应届毕业生的人群中你就占据很大的优势了。 如何准备应届校招&#xff1f; 一、做好规划&#xff0c;把…...

编程日记 2023/10/18 5:45:00

Go语言入门心法(五): 函数

Go语言入门心法(一): 基础语法 Go语言入门心法(二): 结构体 Go语言入门心法(三): 接口 Go语言入门心法(四): 异常体系 Go语言入门心法(五): 函数 一: go语言函数认知 函数相关认知升维&#xff1a;函数的功能就是把相对独立的某个相同或者时类型的功能抽象处理,使之成为一个…...

编程日记 2023/10/18 5:43:59

gitignore文件的语法规则

行注释&#xff1a;以"#"符号开头的行表示注释&#xff0c;Git会忽略这些行。空行&#xff1a;空行会被忽略。文件和目录规则&#xff1a; 可以使用通配符来匹配文件和目录。常用的通配符有&#xff1a; “*”&#xff1a;匹配0个或多个字符。“?”&#xff1a;匹配…...

编程日记 2023/10/18 5:42:57

vscode提示扩展主机在过去5分钟内意外终止了3次，解决方法

参考链接&#xff1a; https://code.visualstudio.com/blogs/2021/02/16/extension-bisect https://code.visualstudio.com/docs/setup/uninstall#_clean-uninstall 使用vscode打开jupyter notebook记事本时&#xff0c;窗口右下角提示扩展主机在过去5分钟内意外终止了3次 而…...

编程日记 2023/10/18 5:41:56

后进先出（LIFO）详解

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

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

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2026/2/9 0:12:12

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

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

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

编程新知 2026/1/25 13:18:12

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/2/9 15:41:39

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2026/1/11 2:37:51

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2026/2/4 23:47:47

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

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

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2026/1/29 5:34:29