开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

获取拖动节点的当前位置

是指在前端开发中，通过代码获取正在拖动的元素在页面中的当前位置坐标。这个功能通常用于实现拖拽交互，例如拖动一个元素到指定位置后触发相应的操作。

在前端开发中，可以通过以下步骤来获取拖动节点的当前位置：

监听拖动事件：首先，需要在拖动节点上添加拖动事件的监听器，例如dragstart、drag、dragend等事件。
获取当前位置坐标：在拖动事件的回调函数中，可以通过事件对象的属性来获取当前位置的坐标信息。例如，可以使用event.clientX和event.clientY来获取鼠标指针相对于浏览器窗口的水平和垂直坐标。
更新位置信息：根据需要，可以将获取到的位置信息用于实时更新拖动节点的位置，例如通过修改节点的style.left和style.top属性来改变节点的位置。

以下是一个示例代码，演示如何获取拖动节点的当前位置：

<!DOCTYPE html>
<html>
<head>
  <style>
    #dragElement {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="dragElement" draggable="true"></div>

  <script>
    var dragElement = document.getElementById("dragElement");
    var initialX, initialY;

    dragElement.addEventListener("dragstart", function(event) {
      initialX = event.clientX;
      initialY = event.clientY;
    });

    dragElement.addEventListener("drag", function(event) {
      var deltaX = event.clientX - initialX;
      var deltaY = event.clientY - initialY;

      dragElement.style.left = (dragElement.offsetLeft + deltaX) + "px";
      dragElement.style.top = (dragElement.offsetTop + deltaY) + "px";
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个红色的方块作为拖动节点，并通过设置draggable="true"属性来启用拖动功能。在dragstart事件中，我们记录了鼠标指针的初始位置坐标。在drag事件中，我们计算了鼠标指针的偏移量，并通过修改节点的style.left和style.top属性来实时更新节点的位置。

这样，通过以上代码，我们可以获取拖动节点的当前位置，并实现拖拽交互的效果。

腾讯云相关产品和产品介绍链接地址：

腾讯云前端开发相关产品：https://cloud.tencent.com/product/web
腾讯云云原生相关产品：https://cloud.tencent.com/product/tke
腾讯云数据库相关产品：https://cloud.tencent.com/product/cdb
腾讯云服务器运维相关产品：https://cloud.tencent.com/product/cvm
腾讯云音视频相关产品：https://cloud.tencent.com/product/tiia
腾讯云人工智能相关产品：https://cloud.tencent.com/product/ai
腾讯云物联网相关产品：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发相关产品：https://cloud.tencent.com/product/mab
腾讯云存储相关产品：https://cloud.tencent.com/product/cos
腾讯云区块链相关产品：https://cloud.tencent.com/product/baas
腾讯云元宇宙相关产品：https://cloud.tencent.com/product/3d

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

web桌面程序之图标拖动排序的分析

在web桌面程序里，图标拖动并重新排序是个比较常见的功能。这个功能我之前反复修改了好几遍，现在终于整理出了比较理想的解决思路，决定拿出来分享下。　　这一功能主要有哪些难点呢？我总结了一下一共有2处难点：　　1、如何知道被拖动的图标在拖动结束后处于哪个位置　　2、知道拖动结束后图标的最后拖动位置，如何判断是在该位置之前插入，还是在之后插入　　知道难点后，就可以来一一解决分析了。　　首先是第一个，如何知道被拖动的图标在拖动结束后处于哪个位置？要解决这一问题，我在之前的《开源的Web桌面应用框架（文

09

EonerCMS——做一个仿桌面系统的CMS（十二）

拖动实现的思路已经更新，为防止大家步入误区，本文建议不用阅读太细，实现思路请参考：http://www.cnblogs.com/hooray/archive/2012/03/23/2414410.html

02

HTML中DOM 对象事件

前置说明 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。在 W3C 2 级 DOM 事件中规范了事件模型HTML DOM 事件指明使用的 DOM 属性级别。鼠标事件属性描述 DOM onclick 当用户点击某个对象时调用的事件句柄。 2 oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发 ondblclick 当用户双击某个对象时调用的事

02

再谈BOM和DOM(5):各个大流浪器DOM和BOM里面的那些坑—兼容性

所有浏览器的focus/blur事件都不冒泡，万幸的是大部分浏览器支持focusin/focusout事件，不过可恶的firefox连这个都不支持。

04

C++ Qt开发：Slider滑块条组件

Qt 是一个跨平台C++图形界面开发库，利用Qt可以快速开发跨平台窗体应用程序，在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率，本章将重点介绍Slider滑块条组件的常用方法及灵活运用。

01

C++ Qt开发：Slider滑块条组件

Qt 是一个跨平台C++图形界面开发库，利用Qt可以快速开发跨平台窗体应用程序，在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率，本章将重点介绍Slider滑块条组件的常用方法及灵活运用。

01

C#实现树型结构TreeView节点拖拽的简单功能(转)

本文摘抄博客园里面的牛人吉日嘎啦。http://www.cnblogs.com/jirigala

01

DOM 和 BOM 中的各种宽高属性

window.innerHeight/window.innerWidth: 返回表示窗口的内部高度/宽度的数字。不包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分

01

从 antDesign 来窥探移动端“滚动穿透”行为

上述是 MDN 中对于 overscroll-behavior 属性的描述，上述这段话恰恰描述了为什么会发生"滚动穿透"现象。

02

很少用到,但掏出来让人感到牛逼的Web API

我过去一看，原来是对canvas画布转成了File文件，用到了一些比如blobToFile方法。

04

学习UISCREENEDGEPANGESTURERECOGNIZER手势

最近几天一直搞首页的框架,看了一些轮子，发现和我们的首页不一样。但是却发现UIScreenEdgePanGestureRecognizer这个类，就研究一下。

02

Canvas 动画之支付宝价格拖动选择

源码：https://github.com/supperjet/H5-Animation/tree/master/%E6%94%AF%E4%BB%98%E5%AE%9D%E4%BB%B7%E6%A0%

# 如何使用 ArcGIS Engine10.2 + C# VS2012 开发环境,实现鹰眼功能。

这是我的练习作业，我拿来回忆和复习。鹰眼地图是一种在地图上显示一个小的缩略图，用来表示当前地图的范围和位置的工具。它可以让我们在查看细节的同时，也能看到整体的情况，方便我们进行导航和定位。它还可以让我们通过拖动或者缩放鹰眼地图上的矩形框，来改变主地图的视图范围，实现同步更新。👏在本文中，我将介绍如何用C#语言和ArcGIS Engine的控件和类库，实现一个简单的鹰眼地图功能。我将分为以下几个步骤：创建一个Windows窗体应用程序，并添加两个MapControl控件，一个作为主地图，一个作为鹰眼地图。编写

01

手摸手从零到一开发一个灵活的Todolist便签项目

作为一个重度拖延症，常常会把第一天的事情放到第二天干，同时又会因为许许多多的琐事导致很多第一天想要做的事情给忘记掉，所以TODO是每一天不可获取的事情，凡事要有安排，提前规划才能事半功倍，不管是工作任务，还是自己的各种日常琐事，都理应需要合理安排，于是，便自己开发了这样一个web端的日常TODO管理工具，用于记录日常的待办和工作安排。

03

基础 | 面向对象实战之封装拖拽对象

作者｜波同学原文｜http://www.jianshu.com/p/b3dee0e84454 前面几篇文章，我跟大家分享了JavaScript的一些基础知识，这篇文章，将会进入第一个实战环节：利用前面几章的所涉及到的知识，封装一个拖拽对象。为了能够帮助大家了解更多的方式与进行对比，我会使用三种不同的方式来实现拖拽。 1、不封装对象直接实现； 2、利用原生JavaScript封装拖拽对象； 3、通过扩展jQuery来实现拖拽对象。本文的例子会放置于codepen.io中，供大家在阅读时直接查看。如果对于

01

抛开插件，你真的懂拖动怎么实现吗？

回到正题，本章将分享一些关于 Javascript 中拖动的内容，探索拖动过程的奥秘。👏

01

Cocos Creator基础教程(11)—可拖拽组件

在游戏中实现节点的可拖动是一个比较常见情况，比如：可以给小朋友做一个将果皮投进垃圾箱的教学练习、角色换装、物品包裹界面等。在Cocos Creator中实现一个可拖动组件，只需对目标节点拖拽配置就能让节点任意移动，这对策划、美术人员来说是不是很有杀伤力！

03

iOS滑动条UISlider的使用方法

如上图所示，在图中有四个内容：滑动条本身、最小值label、最大值label、当前值label。

02

HTML5、JS实现元素拖拽排序

先介绍一下html5的drag属性,拖放（Drag 和 drop）是 HTML5 标准的组成部分。想要启用drag，只要给元素加上draggable="true"就行了（Safari 5.1.2除外）。

06

HTML5 - 拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在H5中，任何元素都支持拖放，但是需要注意的是，有些元素存有默认行为(如a元素)，应当取消该元素的默认行为。

01

使用jQuery Draggable和Droppable实现拖拽功能

上篇博客中已经介绍了web开发中基本拖放原理，现在给出需要完成的功能。最后运行的效果如下图所示：主要功能需求说明： 1.左侧的元素结构最后会通过Ajax call服务器的数据来生成，能支持多级元素。

06

Vcl控件详解_c++控件

大家好，又见面了，我是你们的朋友全栈君。 TTabControl 属性　DisplayRect：只定该控件客户区的一个矩形 HotTrack：设置当鼠标经过页标签时，它的字是否有变化。如果为True，是字会变成蓝色 Images：为每个页标签添加一个图片 MultiLine：如果总页标签的长度大于该控件的宽度时，是否允许多行显示 MultiSelect：是否允许多选页标签。该属性只有当Style为tsFlatButtons或tsButtons时才有效 OwnerDraw：是否允许自己绘画该控件 RaggedRight：指定是否允许标签页伸展到控制宽度 ScrollOpposite：该属性设置将会使MultiLine设为True。当标签页的行数大于1时，当单击其它页时，在它下面的页会自动翻动该控件的底部 Style：设置该控件的样式，大家一试就会知道 TabHeight：设置页标签的高度 TabIndex：反映当前标签页的索引号。该号从0开始 TabPosition：选择页标签的位置，分上，下，左，右 Tabs：对每个页进行增，删，改 TabWidth：设置页标签的宽度

01

Python爬虫之极验滑动验证码的识别

上节我们了解了可以直接利用 tesserocr 来识别简单的图形验证码。近几年出现了一些新型验证码，其中比较有代表性的就是极验验证码，它需要拖动拼合滑块才可以完成验证，相对图形验证码来说识别难度上升了几个等级。本节将讲解极验验证码的识别过程。

01

在Python中如何使用GUI自动化控制键盘和鼠标来实现高效的办公

在计算机上打开程序和进行操作的最直接方法就是，直接控制键盘和鼠标来模仿人们想要进行的行为，就像人们坐在计算机跟前自己操作一样，这种技术被称为“图形用户界面自动化”，也可称为“GUI自动化”

03

Android开发笔记（五十八）铃声与震动

SeekBar继承自进度条ProcessBar，有关ProcessBar的介绍见《Android开发笔记（四十九）异步任务处理AsyncTask》。SeekBar与ProcessBar的不同之处在于，SeekBar是可以拖动的，因此SeekBar可用于媒体播放的进度条，在拖动进度条后，播放器可快进或者快退到指定位置开始播放媒体；SeekBar也可用于调节铃声的音量大小、调节屏幕的亮度、调节字体的大小等等。下面是SeekBar新增加的几个方法与事件： setThumb : 设置当前进度位置的图标 setThumbOffset : 设置当前进度图标的偏移量 setKeyProgressIncrement : 设置使用方向键更改进度时每次的增加值拖动条的拖动事件监听器类名 : OnSeekBarChangeListener 设置监听器的方法 : setOnSeekBarChangeListener 监听器需要重写的方法 : onProgressChanged : 拖动过程中触发 onStartTrackingTouch : 开始拖动时触发 onStopTrackingTouch : 停止拖动时触发，一般在该方法中加入业务逻辑

03

HTML5 drag和drop的亲手实践

最近在公司打杂的时候，突然分到了一个锅，就是要支持一个新的功能：用户可以通过拖曳组件来改变组件的顺序。因此，这阵子就看了一下网上的一些drag和drog的文章以及W3C的介绍，然后自己亲手实践了一下，毕竟打码，才能变得更强。首先，先放一个我的demo，大家可以去那里随便拖动一下玩一玩: https://chenjigeng.github.io/example/drag.html

03

【愚公系列】2023年11月 WPF控件专题 Track控件详解

WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。

01

IT该忍者神龟Jquery小工具easyUI物业摘要召回

找了个时间看了下EasyUI插件。对它的插件感觉是非常舒服，特地把Easy UI的大部分功能属性做了一下汇总。

02

【react-dnd使用总结一】拖放完成后获取放置元素在drop容器中的相对位置

工具函数-根据元素的起始位置和最终位置，计算相对于某元素的位置 export interface IPosition { left: number; top: number; } /** * 根据元素的其实位置和最终位置，计算相对于某元素的位置 * @param initialPosition 拖动元素相对于屏幕左上角的起始位置（偏移量） * @param finalPosition 拖放完成后当前节点相对于屏幕左上角的位置 * @param containerEle 目标容器元素 * @

01

CreatorPrimer|飞机大战（一）

前两天在Cocos官方公众号上学习了「大掌教」的Cocos Creator 2.x Camera教程，总算是对摄像机组件有了一个初步的认识，乘热打铁Shawn用Camera摄像机练习了一个飞机大战游戏，目前主要实现3个功能：

02

拖拽，自由组合，让你的开发更加简单，用户更方便

今天给大家推荐一个自由拖拽，自由组合的控件，这个控件是我自定义写的。通过它，我们可以自由拖拽，自由组合实现一个界面，满足一个用户自由组合界面的需求。这里不是通过自由拖拽控件，来快速开发一个界面，而且更人性化的让用户去自由组合一个界面。 1 前言最近有一个项目，有一个主界面，界面上有很多控件或者有多个 fragment 组成，大小不一，而且由于用户需要，需要自由拖动和自由组合，形成用户自己需要的组合成的模样。所以就写了一个 DragerViewLayout ，只要在 DragerViewLayout 下，写

06

js学习总结

转自 http://blog.sina.com.cn/s/blog_75cf5f3201011csu.html

06

Java数据采集-4.分析常见的翻页（加载数据）方式

共两页，列表页地址为：http://blog.csdn.net/TMaskBoy/article/list/2

02

随心所欲的滚动条，远离产品汪（一）

在我们的开发生活中，相信很多人都会遇到形形色色的项目需求，比如更改浏览器的默认样式，在产品定下需求后给的网页设计图中我们最常遇到的是自定义滚动条的样式，或者当你想构建一个很有特色和创意的网页，那么也肯

05

Flutter实战 | 从 0 搭建「网易云音乐」APP（七、歌词（二））

本系列可能会伴随大家很长时间，这里我会从0开始搭建一个「网易云音乐」的APP出来。

00

SVG的动态之美-搜狗地铁图重构散记

搜狗地图发布了新版的移动端地铁图，改版初衷是为了用户交互体验的提升以及性能的改善。原版地铁图被用户吐槽最多的是pinch缩放不流畅、无过渡动画、拖拽边界不合理等等，大体上都是交互体验上的问题。实际上原版的问题不仅仅存在于交互体验上，源代码也是一团糟：无模块化概念；存在冗余逻辑和文件；滥用第三方库&工具； UI的更新仍旧是直接操作DOM；构建&发布流程不规范。以上问题其实跟业务以及技术选型无关，可以说是任何一个“历史悠久”的项目都难以避免的问题。针对以上问题的重构方案不是本文要阐述的核心，所以就一笔

00

uni-app 微信小程序中关于 map 地图使用案例分享

这篇文章，我将带领大家使用微信内置地图详细讲解关于如何配置地图、打开地图和使用地图。

02

table表格拖拽

el-table 的拖拽使用 Sortable.js 官方文档 :https://github.com/SortableJS/Sortable

02

MFC 控件编程之水平滚动条跟垂直滚动条

首先在操作滚动条的时候.我们要知道滚动条的一些属性. 比如我们要设置最大值最小值. 以及每次递增的值是多少.都要设置.

04

Qt编写安防视频监控系统35-onvif抓拍图片

以前不知道onvif也可以做抓拍功能，直到近期重新用Onvif Device Test Tool工具测试的时候，发现还有抓图的接口，于是抓跑分析出要收发的数据，然后加入到自己封装的onvif操作类中，这个抓图有个应用场景就是报警以后，直接通过onvif抓图，而不需要打开实时视频流，基本上不占用什么资源。

00

Python之极验滑动验证码的识别（教程+案例）

1 滑动验证码的识别介绍本节目标：用程序识别极验滑动验证码的验证，包括分析识别思路、识别缺口位置、生成滑块拖动路径、模拟实现滑块拼合通过验证等步骤。准备工作：本次案例我们使用Python库是Selenium，浏览器为Chrome。请确保已安装Selenium库和ChromeDriver浏览器驱动。了解极验滑动验证码：极验滑动验证码官网为：http://www.geetest.com/ 验证方式为拖动滑块拼合图像，若图像完全拼合，则验证成功，否则需要重新验证，如图所示： image.png 接下来

04

UIKit Dynamics:抛出视图 —《Graphics & Animation系列三》

翻译自raywenderlich网站iOS教程Graphics & Animation系列

02

康耐视VIDI介绍-蓝色定位工具（Locate）

蓝色定位工具用于识别和定位图像中的特定特征或特征组。该工具的输出可用于为其他下游 ViDi 工具提供位置数据。使用该工具时您提供一个训练集，然后识别图像中的特征。您还可以使用该工具创建两种不同类型的模型。布局模型提供了检查特征是否存在以及验证区域中一个或多个特征的正确实例数的功能。可以生成节点模型，其定义一组特征之间的空间关系。

03

零基础入门 11：通过脚本设置UGUI Image

因为默认的脚本是没有引入UnityEngine库的。所以当我们新创建了一个脚本后，在脚本上方加入UnityEngine的引用。

05

【Unity3D】3D 物体概念 ① ( 轴心点概念 | 物体的父子关系 | 子节点相对坐标 )

轴心一般是 3D 物体的几何中心 , 下面通过示例说明 3D 物体的轴心概念 ;

02

Qt编写安防视频监控系统33-onvif云台控制

云台控制也是onvif功能中最常用的，最常用的功能排第一的是拿到视频流地址，排第二的就是云台控制了，云台控制的含义就是对带云台的摄像机进行上下左右的移动，一般云台摄像机都是带有一个小电机，一旦收到485或者网络来的正确的指令以后就触发单片机程序，然后单片机程序驱动电机进行转动，所以相对来说云台摄像机比普通的摄像机更耗电，当然价格也更贵。

00

如何在 UE4 中制作一扇自动开启的大门

相信很多玩过游戏的朋友都知道，在玩游戏的过程中，如果我们被一道门给挡住了去路，只要按下某一个按键，门就会自动的开启。于是，今天我就带大家来制作一道会自动开启的大门吧！

02

Qt编写安防视频监控系统34-onvif事件订阅

事件订阅是近期增加的功能，主要是因为遇到越来越多的一个应用场景，能够接收摄像机的报警事件，比如几乎所有的摄像机后面会增加报警输入输出接口，如果用户外接了报警输入，则当触发报警以后，对应的事件也会通过onvif传出去，这样就相当于兼容了所有onvif摄像机厂家的报警事件接收，在一些应用系统中，这个功能也是很常见的。

00

Python学习总结（1）—turtle海龟作图

forward(distance) 前进 backward(distance) 后退 right(degree)右转默认为角度 left(degree) 左转默认为角度 goto(newX,newY) | setpos(newX,newY) | setposition(newX,newY) 前往/定位不设置penup()时，会产生画迹 setx(newX) 设置x坐标相当于goto(newX,formerY),不设置penup()时，会产生画迹 sety() 设置y坐标相当于goto(newX,formerY),不设置penup()时，会产生画迹 setheading(to_angel) 设置朝向 0-东；90-北；180-西；270-南相当于left(degree)，因为海龟默认初始指向东 home() 返回原点并改海龟朝向为初始朝向相当于goto(0,0) 和setheading(0）的合作用，不设置penup()时，会产生画迹 circle(radius, extent=None, steps=None) 画圆周/正多边形 radius是半径,也就是圆心位于海龟的左边，距离海龟radius【注意海龟朝向】 extent是所绘制圆周的圆心角大小，单位为°，缺省为360° steps：用来画正多边形，缺省会拟合为圆 dot(size=None, *color) 画点在海龟所处位置画点 size是点的大小，为整型；缺省为默认值 *color是点的颜色的英文单词，为字符串类型 stamp() 印章在海龟当前位置绘制一个海龟形状【需要提前设置海龟形状，缺省为箭头形状】，并返回该印章的id【需要print(t.stamp())或及时赋值给其他变量stamp_id=t.stamp()】 clearstamp(stamp_id) 清除印章参数必须是stamp()函数返回 clearstamps(n) 清除多个印章 n缺省为清除全部印章 n为正数是清除前几个印章 n为负数是清除后几个印章【前后次序以印章出现顺序为准】 undo() 撤消没有参数。撤消 (或连续撤消) 最近的一个 (或多个) 海龟动作。可撤消的次数由撤消缓冲区的大小决定。 speed(Vnum) 速度 Vnum取值为0-10。1-10速度逐渐加快；0为最快【此时没有转向的动画效果，前后移动变为跳跃】或Vnum取为”fastest”对应0,”fast”对应10,”normal”对应6,”slow”对应3,slowest”对应1

01

使用Raphael绘制流程图，自绘动态箭头，可拖动，有双击事件，纯前端，兼容各种浏览器

官方宣称兼容各种主流浏览器，据笔者测试在IE6下尚有一些问题（不过这些与本文无关）

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭