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

js实现拖拽功能

news 文章来源：https://blog.csdn.net/study_way/article/details/133883949 2025/4/30 9:06:43

基于onMouseDown 、onMouseMove 、onMouseUp

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

在 mousedown 事件中，开始追踪拖拽操作并记录鼠标按下的位置。
在 mousemove 事件中，根据鼠标的移动，更新被拖拽元素的位置。
在 mouseup 事件中，停止拖拽操作，清除事件监听器，以及执行必要的清理操作。

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

实现拖拽的步骤：

在元素上监听 mousedown 事件。当鼠标按下时，标记拖拽操作的开始。
在 mousedown 事件处理程序中，记录鼠标按下时的初始位置（通常是相对于被拖拽元素的偏移量）。这将帮助你计算鼠标相对于元素的位置。
添加 mousemove 事件监听器。在 mousemove 事件处理程序中，计算鼠标位置的变化，并根据变化来更新被拖拽元素的位置。
在 mouseup 事件处理程序中，停止拖拽操作。清除 mousemove 和 mouseup 事件监听器，以确保不再处理鼠标移动和释放事件。

注意事项：

记录鼠标偏移：确保在 mousedown 事件处理程序中记录鼠标按下时的初始位置。这将帮助你计算鼠标相对于元素的位置，以正确更新元素的位置。
防止文字选中：在拖拽元素上防止文字的选中，可以使用 CSS 的 user-select: none; 样式或在 mousedown 事件中取消选择文字的默认行为。
移动边界：确保在 mousemove 事件处理程序中更新元素的位置时，限制元素的移动范围，以防止它移出可见区域或父元素的边界。
清理：在 mouseup 事件处理程序中，清除事件监听器，以避免内存泄漏或不必要的事件处理。
可访问性：考虑到可访问性，确保你的拖拽操作不会影响键盘用户。同时，确保在视觉上指示被拖拽元素的状态。
兼容性：确保你的拖拽实现在不同浏览器中正常工作，可能需要处理一些浏览器特定的问题或事件。

以下是一个简单的示例，演示了如何使用 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';
});

另外注意：

绝对定位： 通常，要实现拖拽效果，需要将元素设置为绝对定位，这样它可以脱离文档流，使其能够在页面上自由移动。这是拖拽操作的一个基本前提。
事件绑定： 拖拽元素的 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 提供了内置的拖放功能，主要涉及到以下事件和方法，以及一些注意事项：

拖放的思路：

ondragstart 事件： 当你想要元素成为可拖拽的源时，你可以监听 ondragstart 事件，该事件在用户开始拖动元素时触发。你可以设置 dataTransfer 对象的数据，以便在拖放操作中传递信息。
ondragover 事件： 当你希望元素成为拖放目标时，你可以监听 ondragover 事件，该事件在拖动元素悬停在目标元素上时触发。你可以通过 ondragover 事件的默认行为阻止拒绝拖放，或者通过 JavaScript 来决定是否接受拖放操作。
ondrop 事件： 当你希望在目标元素上接受拖放操作时，你可以监听 ondrop 事件，该事件在用户完成拖放操作时触发。在 ondrop 事件处理程序中，你可以访问拖放数据，执行相应的操作，以及取消默认行为。

注意事项：

阻止默认行为： 如果你希望某个元素成为拖放源或目标，通常需要在 ondragstart 和 ondragover 事件处理程序中使用 event.preventDefault() 阻止默认行为，以便正确处理拖放。
数据传递： 使用 dataTransfer 对象来传递数据，这可以是文本、URL、自定义数据等。在 ondragstart 事件中设置数据，然后在 ondrop 事件中获取数据。
拖放目标状态： 使用 ondragenter 和 ondragleave 事件来处理拖放目标的状态变化。这些事件在拖动元素进入和离开目标元素时触发。
拖放效果： 你可以使用 dataTransfer.effectAllowed 和 dataTransfer.dropEffect 来指定拖放操作的效果，如移动、复制或链接。这有助于提供用户反馈。
跨浏览器兼容性： 考虑跨浏览器兼容性，因为不同浏览器可能会有一些差异，特别是在数据格式方面。
拖放元素样式： 为了提供视觉效果，你可以在 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

Web API 提供了内置的拖放

相关文章：

js实现拖拽功能

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

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

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

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

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

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

word 如何编写4x4矩阵

INTELlij IDEA编辑VUE项目

linux进程间通讯--信号量

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

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

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

Maven 使用教程（三）

行秋找工作的记录

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

九阳真经之各大厂校招

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

gitignore文件的语法规则

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

【算法挨揍日记】day16——525. 连续数组、1314. 矩阵区域和

k8s-13 存储之secret

什么是高阶成分（HOC）

深度学习硬件配置推荐

数仓建设（一）

Springboot整合taos时序数据库TDengine

Epoch、批量大小、迭代次数

qt-C++笔记之清空QVBoxLayout中的QCheckBox

pc微信39223部分算法call偏移

尚硅谷Flink（三）时间、窗口