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

js实现拖拽功能

news 2026/2/10 0:21:06

基于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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2026/1/23 8:33:56

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2026/2/6 9:24:15

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2026/2/9 6:43:47

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23