【设计题】想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 400+累计阅读 481平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄18年

关注

原创最新推荐文章于 2026-04-08 10:32:55 发布 481 阅读 AI 写同款· GEO 优化 ›

【D3.js实战】Force Simulation 力导图制作文章目录Force Simulation 力导图实战 @ D3.js数据结构思路分析画布初始化，全局变量定义数据读取力模拟数据绑定 datajoin结点与结点名称链接tick函数编写drag 拖曳交互设计```d3.drag()```函数dragstarted 拖曳开始dragged 拖曳过程dragended 拖曳结束调用方式完整代码效果初始拖曳 Force Simulation 力导图实战 @ D3.js 数据结构做力导图使用到的数据为json数据，一般采用json数据来表达图结构。本次实验选用的阅读详情

          
          给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
mousedown事件触发后，开始拖拽
mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
mouseup时，拖拽结束
需要注意浏览器边界的情况

收录于

JavaScript

当前文章被收录于：

JavaScript

108 篇文章 1 人学习

订阅专栏查看详情

WEB

当前文章被收录于：

WEB

63 篇文章 0 人学习

WEB 综合

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#前端 #javascript

前端面试【109道JavaScript面试题，助力你的Offer】阅读详情

相关推荐

js实现层的拖曳，很实用的哦

有两种方法，研究了好久，所以就算给个辛苦劳动分吧，哈哈

元素定位——实现对页面元素的拖拽效果

offsetLeft: 元素左边框与最近定位的父级元素的距离，若在所有的父级上都没有定位，则相对于整个文档。screenX: 鼠标相对于显示器屏幕左侧位置的x坐标（跟浏览器窗口不一样，把浏览器往左边移动能看出效果）getBoundingClientRect().left: 元素左边框相对于可视区的距离，有可能为负值。pageX: 鼠标相对于文档的x坐标，而非窗口坐标，如果没有滚动距离，则跟clientX是一样的。offsetX: 鼠标相对于事件源元素的x坐标。clientLeft: 元素左边框的宽度。

m0_66706006的博客 311

Flotherm XT学习历程

大家好，通过半年的热仿真软件学习使用，最终发现最好用，最好上手的软件就是Flotherm XT，对新手非常友好，但由于软件近几年才发布，网上教程非常少，后面我将在这里持续分析软件使用心得，和大家一起学习。

xiaoredred的博客 6259

前端使用H5中draggable实现拖拽排序效果两种实现效果

/ insertBefore 插入的节点如果在list中存在，那么则会删除，再插入新的位置。// 在目标节点的下一个元素之前插入拖拽的节点。// 在目标节点的下一个节点之前插入拖动节点。// 在拖动节点的下一个节点之前插入目标节点。// 拖拽节点下标小于目标节点的下标。// 拖拽节点下标大于目标节点的下标。// 在目标节点之前插入拖拽的节点。// 当拖拽放入某个目标节点后。// 当拖拽进入某个节点时候。// 当前拖拽节点拖拽结束。// 当前拖拽节点拖拽结束。// 当拖拽开始的时候。"当前拖动的节点："

杨杨吖的博客 2860

SpyGlass CDC实战：如何用sgdc约束文件解决跨时钟域报错（附常见错误排查）

本文详细介绍了如何使用SpyGlass CDC工具编写sgdc约束文件解决跨时钟域(CDC)报错问题。从基础语法到实战案例，涵盖时钟声明、复位约束、路径豁免等关键技巧，特别针对SPI断续时钟等特殊场景提供解决方案，并附常见错误排查指南，帮助工程师高效完成CDC验证。

weixin_28744423的博客 626

基于Simulink的防空导弹六自由度弹道建模与仿真实战

本文详细介绍了基于Simulink的防空导弹六自由度弹道建模与仿真方法。通过分析导弹动力学原理、Simulink环境配置、气动力建模、推进与控制系统设计等关键环节，提供了一套完整的实战指南。文章特别强调了六自由度模型在防空导弹仿真中的重要性，并分享了常见问题排查与优化建议，为相关领域工程师提供实用参考。

apple5的专栏 868

原生js实现对某一个结点的拖拽

// HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。 // HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。 // MouseEvent.clientX 是只读属性，它提供事件发生时的应用客户端区域的水平坐标 (与页面坐标不同)。 window.onload =

The_upside_of_down的博客 310

第9.3章从CMake基础到自动驾驶实战：构建跨平台C/C++项目的全能指南

《CMake构建实战：项目开发卷》精要指南本文系统梳理了许宏旭《CMake构建实战》核心内容，涵盖C++构建全流程：基础构建：详解MSVC/GCC编译器使用、Makefile编写及静态/动态库构建方法 CMake核心：解析语法结构、变量控制、文件操作等关键命令，阐述项目全生命周期管理实战应用：通过快速排序、手写数字识别项目演示现代CMake实践，特别针对自动驾驶领域给出多传感器融合、SLAM等场景的CMake配置方案特色价值：本书填补了官方文档实例不足的空白，提供300+代码示例，是掌握工业级C++

行知SLAM 1343

js实现一个对页面某个节点的拖曳

js拖拽是常见的网页效果，本文将从零开始实现一个简单的js插件。一、js拖拽插件的原理常见的拖拽操作是什么样的呢？整过过程大概有下面几个步骤：用鼠标点击被拖拽的元素按住鼠标不放，移动鼠标拖拽元素到一定位置，放开鼠标这里的过程涉及到三个dom事件：onmousedown,onmousemove,onmouseup。所以拖拽的基本思路就是：用鼠标点击被拖拽的元素触发onmousedown （1）设置当前元素的可拖拽为true，表示可以拖拽（2）记录当前鼠标的坐标x,y （3）记录当前元素

VirgoYellow 的专栏 1304

Spring AI Alibaba实战训练营-20 基于注解驱动的MCP快速开发入门指南

本文详细讲解如何使用SpringAiAlibaba快速开发基于注解驱动的MCP应用。文章详细介绍了MCP协议并且重点介绍了Spring AI通过注解驱动的开发方式简化MCP服务开发。具体包括服务端和客户端的注解使用、城市最新时间查询MCP项目结构概览（服务端和客户端模块）以及环境配置要求。

program哲学 295

AE（自动曝光）调试策略：曝光曲线设计与过曝控制

自动曝光（AE, Auto Exposure）系统是图像质量控制链路中的核心模块之一，其性能直接决定了成像亮度是否稳定、细节是否完整、场景切换是否自然。在现代移动终端影像系统中，AE 不仅需要适应不同光照强度和复杂环境，还需兼顾人脸优先、HDR触发、视频帧率控制等多目标优化需求。本文基于高通 Snapdragon 和 MTK Dimensity 等主流平台的调试经验，系统梳理了 AE 模型设计原则、曝光曲线配置、测光策略选择与过曝抑制机制，并结合典型实战案例，提供可复制的工程落地路径。

努力分享一些人工智能、计算机视觉、影像等相关的知识干货！ 3092

前端实现拖拽的方案

创建一个区域只需要在标签上添加 ondragover 和 ondrop 方法即可，表示这个区域可放置并进行处理。此时，元素已经可以拖动了，但会显示一个禁止的图标，这是因为没有可放置的区域。还需要在需要拖动的元素上添加 ondragstart 方法。

望京十三兄的博客 4342

OpenClaw人人养虾：接入即时通讯平台Zalo

通过 Zalo Official Account（OA，官方账号）API，可以将 OpenClaw 接入 Zalo，实现面向越南用户的自动化客服和互动。

王国平的博客 437

（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）

给需要拖拽的节点绑定mousedown, mousemove, mouseup事件 mousedown事件触发后，开始拖拽 mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置 mouseup时，拖拽结束需要注意浏览器边界的情况 ...

LuckXinXin的博客 355

银行监管报送系统介绍（十五）：金融审计平台

金审平台主要包括基础、财务、结算、信贷和中间业务五大板块，主要服务于审计署对中国银行的各项审计任务，同时也可为行内审计、稽核检查、数据分析、总分行提供基础数据服务，为实现基础数据共享提供了有力的数据保障。2019年1月某全国性股份制商业银行收到审计署2019-23号文，文中指出为进一步提高审计数据质量，审计署审计组派员前往9家重点商业银行，就完善标准化数据的相关情况与各银行有关部门进行讨论协商。关于数据报送频率及报送内容：数据从2019年4月开始，按月报送，即于每月25日之前报送上月数据；

银行信息系统应用架构详解 2053

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面，电脑运行连游戏界面都一样大小，很怀旧，很真实，（英文版）强烈推荐，很小的文件，很难才找到的。

各大互联网公司前端笔试面试题–JavaScript篇

很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧，不仅适用于求职者，对于巩固复习js更是大有裨益。而更多的题目是我一路以来收集的，也有往年的，答案不确...

黑马程序员官方博客 385

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等，可在创建的窗口进行控制

JavaScript基础篇(61-70题)

在JavaScript中，有多种方法可以对数组进行去重操作。使用 Set 数据结构：Set 是一种集合数据结构，它只能存储唯一的值。通过将数组转换为 Set，然后再将 Set 转换回数组，可以实现去重操作。使用 filter() 方法和 indexOf() 方法：利用 filter() 方法遍历数组，使用 indexOf() 方法判断元素第一次出现的位置与当前索引是否一致，如果一致则保留，否则过滤掉。});

BradenHan的专栏 251

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明，包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

Camera2Demo

在Camera2 的基础上进行封装，使得Camera2一堆初始化逻辑与Activity分离，降低耦合度，完成预览拍照并保存的操作

Web 前端面试题目及答案汇总

以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题，通过对知识的整理以及经验的总结，重新巩固自身的前端基础知识，如有错误或更好的答案，欢迎指正。: ）阅读目录 HTML/CSS部分 JavaScript部分其他 HTML/CSS部分 1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（p

holmes89757的博客 702

阮一峰 javascript_JavaScript面试题分享

　　今天小编要跟大家分享的是关于JavaScript面试题部分内容。准备参加web前端面试的小伙伴们一起看一看吧，希望能够对大家有所帮助！ 1、怎样添加、移除、移动、复制、创建和查找节点? 1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 2)添加...

weixin_39729115的博客 941

b/s工作流设计器

最近在公司用EXT+JS+XML做了一个B/S工作流设计器的东东,主要实现流程建立,以及流程图节点的可视化操作,而且同时存在设计视图和代码视图,并能实现节点的拖曳操作和节点信息的编辑,支持XML文件和数据库两种形式,并可以以XML格式保存流程图,不过还有不少的问题,目前正在改进!

hbzyaxiu520的专栏 4692

EXTJS动态树，非常完整的一个例子

这个是我从ITeye里看到的，最近也在做这个例子，觉得那边的写的非常的不错，现在拿过来分享下，等自己的例子写好，也会拿上来分享的 EXTJS动态树的实现举例一、描述：通过dwr实现JS与后台的交互，从而实现动态树中叶子节点和目录节点的增加和编辑、以及节点的拖曳，节点的增删和拖曳都会改变自身以及它所在的目录节点下的相关节点的序号，能使得后台与前台同步。这个序号借助了tree中n

luckypeng的专栏 2879

innerhtml js执行_前端面试题整合（JS进阶篇）

前端面试题整合（JS进阶篇）（二）Ajax 是什么? 如何创建一个Ajax？AJAX全称是Asychronous JavaScript And Xml（异步的 JavaScript 和 XML）它的作用是用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持其主要通过...

weixin_39533307的博客 87

jBPM Web Designer（jBPM Web 设计器、jBPM 流程设计器、工作流程设计器）

研究jBPM已有一段时间了，今天终于决定拿点东西出来，但请大家原谅不能分享源码。之所以拿出来，希望通过交流认识到更多技术一线的同志们，结点人缘。本人不才只念完了高中，求职路屡战屡败，只好踏实地弄点东西出来撑下门面，希望有所帮助，找到一份满意的工作。大多研究JBPM的，对其引擎的扩展开发都不曾苦恼，但提及其可视化设计工具都希望能有一款WEB版设计器。

lipinliang的专栏 2789

利用JQ实现简单的拖曳效果

提出问题如何实现将一个盒子里的元素拉到另外一个盒子里？实现思路此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作。操作设计的节点有：原节点，临时节点，新节点节点的移动涉及事件e的坐标操作元素使用JQUERY 代码实现相应的注释在文中已有体现，请认真观看，你可以理解的。先定义一个对象 drag

小皮咖的博客 1689

前端最新JavaScript 高级进阶面试题（30题&附答案）

说说什么是面向对象编程及面向过程编程，它们的异同和优缺点?

m0_71479134的博客 5666

(Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

利用JavaScript（JS）实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽，可以交换位置，其中Demo-1利用了勾股定理判断距离！ Demo-1整体思路： 1.首先div实现自由移动，一定需要脱离标准文档流，所以我们给它使用绝对定位。 2.利用视觉欺骗，点击鼠标悬浮的其实是利用JS生成的一个Div，交换信息的两个Div并没有位置交换，只是把双方属性进行了交换。...