开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

拖动div/lessons并获取每个的位置

拖动div/lessons并获取每个的位置是一个前端开发的问题，涉及到DOM操作和事件处理。

在前端开发中，可以通过使用JavaScript来实现拖动div元素并获取其位置。以下是一个简单的实现示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    #lessons {
      width: 200px;
      height: 200px;
      background-color: #f1f1f1;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="lessons" draggable="true">Lesson 1</div>
  <div id="lessons" draggable="true">Lesson 2</div>
  <div id="lessons" draggable="true">Lesson 3</div>

  <script>
    var lessons = document.querySelectorAll('#lessons');

    lessons.forEach(function(lesson) {
      lesson.addEventListener('dragstart', dragStart);
      lesson.addEventListener('dragend', dragEnd);
    });

    function dragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id);
    }

    function dragEnd(e) {
      var lesson = e.target;
      var lessonRect = lesson.getBoundingClientRect();
      console.log('Lesson:', lesson.id);
      console.log('Position:', lessonRect.left, lessonRect.top);
    }
  </script>
</body>
</html>

在上述示例中，我们为每个lesson div元素添加了draggable="true"属性，使其可拖动。然后，通过添加事件监听器来处理拖动开始和结束的事件。在拖动开始时，我们使用e.dataTransfer.setData()方法设置了拖动数据，这里我们将lesson的id作为数据传递。在拖动结束时，我们通过getBoundingClientRect()方法获取了lesson元素的位置信息，并将其打印到控制台。

这个功能可以应用于课程表、拖拽排序等场景中。对于云计算领域，可以将这个功能应用于云资源的拖拽管理，例如拖动虚拟机实例进行位置调整或拖动存储桶进行管理等。

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

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（TBC）：https://cloud.tencent.com/product/tbc
腾讯云物联网平台（IoT Explorer）：https://cloud.tencent.com/product/ioe
腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp

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

有帮助

没帮助

相关·内容

JS 获取所有相同class的div，并遍历

Again，这个问题对于使用mvvm框架，例如vue，weex和angular 是任何难度的因为他们的dom都是直接用js生成控制的，在生成之初就直接处理好久好了。...但是对于普通的js来说，这就很麻烦了。...不过很好，JQuery已经帮我们集成了一个方法.each() 例如你想要遍历class为rffanlab的那么你可以这么做 $(".rffanlab").each(function(){ // do...something here // $(this) 代表当时被遍历循环的元素 }) 虽然jquery是上一个时代的产物，但是不可否认他也给我们做出来非常多的贡献，让我们操作dom时不至于捉襟见肘，时常需要自己去实现

14K2 0

js获取div编辑框，textarea，input text的光标位置，兼容FF和IE

xhtml1/DTD/xhtml1-transitional.dtd"> js获取...div编辑框，textarea，input text的光标位置，兼容FF和IE 一二三四五六七八

7.6K6 0

VBA技巧：自动给每个工作表添加相同大小和位置的按钮并指定相同的宏

标签：VBA Q：我有一个工作簿，包含有多个工作表，我想在这些工作表的同一位置都添加一个按钮，并对这些按钮指定相同的宏过程，如何实现？ A：这样的操作最适合使用VBA。...在第一个工作表，假设其名称为“Sheet1”中，在想要添加按钮的位置放置一个大小合适的按钮，编辑修改其上的文字，然后指定宏过程，示例为MacroToRun。...Selection.Text = C End If Next End Sub Sub MacroToRun() MsgBox ActiveSheet.Name End Sub 运行AddButtons过程，即可在每个工作表相同位置添加相同大小的按钮并指定相同的宏

3121 0

echart3 多图联动获取点击的数据，并把每个图上的数据取出后放入各自的div中

">温度 ... 压力 ...id="main3" style="height:200px;"> var axisData = [ "8", "9"

1.3K1 0

《手把手教你》系列技巧篇（三十）-java+ selenium自动化测试- Actions的相关操作下篇（详解教程）

2.1基础讲解 //鼠标拖动API,首先实例化一个对象，后边将用这个对象进行一系列操作 Actions action = new Actions(webdriver); //source-要拖动的元素A...，target-拖动元素A到达的目标元素B action.dragAndDrop(source, target); //source-要拖动的元素A,拖动元素移动多少,标准以元素A左上角为准,拖动元素相对元素...，如下小视频所示： 4.小结 4.1重中之重拖动元素有一个最重要的前提是，你定位的xpath等一定要准确,否则，到时候会出现各种拖动错乱的问题: 1.拖动元素如果用到action.dragAndDropBy...(k2, -570, 100).perform();比如，如果我们想把A元素(可能为图标)拖动到B区域可能用到这个方法,但是把A拖动到B区域之后，如果我们又想把此时的A拖动到其它地方，但是此时A没有id...元素，然后执行鼠标移动动作 (mouse move)，移动到 target 元素位置或者是 (xOffset, yOffset) 位置，再执行鼠标的释放动作 (mouse release)。

1.3K3 0

《手把手教你》系列技巧篇（三十一）-java+ selenium自动化测试- Actions的相关操作-番外篇（详解教程）

2.鼠标操作　　WebElement的click()方法可实现元素的点击操作,但是没有提供鼠标的右击/双击/悬停/鼠标拖动等操作.这些操作需要通过Action类提供的方法来实现!...4. doubleClick() 双击 5. dragAndDrop() 拖动 6. release() 释放鼠标 7. perform() 执行所有Action中的存储行为 2.2演示模拟验证码点击拖动场景...="return false;" unselectable="on"> 请按住滑块，拖动到最右边 <div class="handler...//鼠标按下时候的x轴的位置 handler.mousedown(function(e) { isMove = true; x = e.pageX -...=》移动到目标位置=》松开释放鼠标=》perform执行Actions的一系列方法调用 actions.clickAndHold(targetElement).moveToElement

1.1K4 0

Angular DOM 抽象概述

，可能会在某个标签上同时使用 *ngIf 或 *ngFor 指令，比如： <div class="lesson" *ngIf="lessons" *ngFor="let lesson of lessons...为了实现这个需求，我们必须做类似的事情： ...示例 <div...() 方法创建 ComponentFactory 对象调用组件容器对象的 createComponent() 方法创建组件并自动添加动态组件到组件容器中基于返回的 ComponentRef 组件实例...对于列表中声明的每个组件，Angular 将会创建对应的一个 ComponentFactory 对象，并将其存储在 ComponentFactoryResolver 对象中。

3.5K3 0

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

上面用 clientX/Y 获取鼠标的位置信息，那用 pageX/Y 可以不呢❓ clientX：提供了鼠标指针相对于浏览器视口（即当前可见的页面部分）左上角的水平坐标。...当你滚动页面时，pageX 的值会改变，因为它考虑了滚动的距离。简而言之，就是要不要考虑滚动条的问题，如果你想要获取鼠标指针相对于整个页面的位置，应该使用 pageX。...，让每个元素变成可拖动元素。...大概二者的区别如下： 1️⃣ 拖动元素的位置 = 拖动元素原本位置 + 拖动距离 2️⃣ 拖动元素的位置 = 根据鼠标最新位置直接计算拖动元素的最新位置 = 鼠标最新位置 - 鼠标在拖动元素上的距离鼠标在拖动元素上的距离...：效果如下：现在每个元素都能拖动了，只是还没有加上交换的逻辑。

621 0

【汉诺塔】小游戏开发教程

，每个圆环有颜色、代表大小的序号属性，序号从1开始，1代表最大，因为圆环数量可变，所以每个圆环的宽高、位置都需要动态进行计算，渲染同样是循环进行渲染，三个圆环的情况如下所示：鼠标按下事件处理函数的主要逻辑是设置拖动标志位、缓存当前拖动的一些数据，比如当前拖动圆环的相关信息及鼠标按下的位置信息...因为涉及到位置计算，所以需要获取实际的DOM元素，先在模板里加上ref用于引用DOM: <div class="column...checkInColumnIndex(order) { let result = -1 // 获取圆环相当于浏览器窗口的位置信息 let ringRect...$refs['ring' + order][0].getBoundingClientRect() // 遍历获取柱子区域相当于浏览器窗口的位置信息 ;[0, 1, 2].

1.8K1 0

拖拽牛逼，轻松实现一个自由拖拽的组件

前言大家好，在前两篇文章中，我们走进了前端低代码的世界，并揭秘了低代码的核心——页面设计器的实现。...，我们会获取到拖动的事件对象 (e)，在拖动对象中我们能获取到一个重要的属性 dataTransfer ，我们可以通过 dataTransfer 的 dropEffect 属性控制被拖动的元素的放置行为...，上文中我们讲到，拖动的元素以及目标元素可以设置一系列的事件，那么我们就可以在组件列表渲染时，为每个组件设置一下 dragstart 事件，在该事件中我们需要做如下处理：设置拖动元素的放置行为为移动，...拖动元素在目标元素松手时添加元素到画布，即将组件元数据添加到list2中，元素所对应的元数据记录也了这个组件在画面中的坐标位置。然后在dragend事件中取听以上动作。...那拖动到画布中的组件又是如何实现通过拖动灵活的移动位置的呢？

1.8K3 0

VUE-组件化

6.组件化在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了我们开发的成本。...你会发现每个组件互不干扰，都有自己的count值。怎么实现的？组件的data属性必须是函数！...6.4.1.props（父向子传递）父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）子组件通过props接收父组件属性父组件使用子组件，并自定义了title属性： var app =...>', props:['num']// count是从父组件获取的。

7072 0

Vue拖拽组件开发实例

拖拽实现始拖动时：获取到接触点相对于整个视图区的坐标 clientX，clientY；获取元素距离视图上侧和左侧的距离 initTop， initLeft；计算接触点距离元素上侧和左侧的距离 elTop...=clientY-initTop, elLeft=clientX-initLeft；拖动过程中：通过 currTop=clientY-elTop, currLeft=clientX-elLeft 实时获取元素距离视图上侧和左侧的距离值...，并赋值给元素，使元素跟着手指的移动而动起来；拖动结束，定位元素。...设置为一个较大的值，防止元素二次拖拽无效；拖拽过程中：将元素即将落入新位置的那个li下div的item.isShow设置为true，其他li下div的item.isShow均设置为false; 拖拽结束...贴一段伪代码： touchStart(e){ // 获取元素距离视口顶部的初始距离 initTop = e.currentTarget.offsetTop; // 开始拖动时，获取鼠标距离视口顶部的距离

4.4K13 0

1小时搞定卡片拖拽、自动排列交换位置、拖拽数据存取

总共有三篇文章，介绍组件的制作思路和遇到的问题，以及在发布到npm上并下载使用的过程中，发生了什么问题并如何解决。...第一篇为组件封装后的使用文档及介绍第二篇为组件的实现思路以及细节第三篇为将组件打包并上传至npm，如何实现按需加载和下载后使用的问题这是vue实现的拖动卡片组件，主要实现了：拖动卡片与其他卡片的位置更换...，并且其他卡片根据拖动的位置自动顺移，位置数据实时更新拖动的时候可使用鼠标滚动卡片根据数据生成，所有参数和内容都是可以自定义的，方便应用于不同场景不同操作的事件都可获取到，拖动后的位置数据会实时更新...} itemData：{ 类型：Object, 功能：获取当前卡片的其他数据 } */ //在子组件中使用props即可使用 props:{ animationState:{...event 第二个参数id，是选中的卡片的id swicthPosition 作用：在拖动一个卡片到另外一个卡片的位置的时候，触发此事件事件参数： swicthPosition(oldPositon

3.9K2 1

HTML5 - 拖放

前言拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在H5中，任何元素都支持拖放，但是需要注意的是，有些元素存有默认行为(如a元素)，应当取消该元素的默认行为。...ondrop 当拖动操作结束并释放于释放元素上触发注意：只有在拖拽时触发相关事件，鼠标事件是不会触发的。...通俗一点讲，就是可以通过它来传输被拖动的数据，以便在拖拽结束的时候，对数据进行其他的操作。 3号 // 获取所有 .element DOM节点 var...这是由于W3C要求对dataTransfer里的值进行保护。因此，如果需要在这些事件里获取数据，只能通过一个全局变量等其它方式来实现了。

1.5K1 0

低代码设计器的自由布局拖动的实现原理

可拖动的元素复制代码拖动事件事件分类元素可以进行拖动了，我们就可以通过元素的拖动事件进行拖动开始-结束的一些逻辑控制了，拖动事件主要分为两个类别...，我们会获取到拖动的事件对象 (e)，在拖动对象中我们能获取到一个重要的属性 dataTransfer ，我们可以通过 dataTransfer 的 dropEffect 属性控制被拖动的元素的放置行为...，上文中我们讲到，拖动的元素以及目标元素可以设置一系列的事件，那么我们就可以在组件列表渲染时，为每个组件设置一下 dragstart 事件，在该事件中我们需要做如下处理：设置拖动元素的放置行为为移动，...拖动元素在目标元素松手时添加元素到画布，即将组件元数据添加到list2中，元素所对应的元数据记录也了这个组件在画面中的坐标位置。然后在dragend事件中取听以上动作。...那拖动到画布中的组件又是如何实现通过拖动灵活的移动位置的呢？

4.2K3 0

HTML5 拖放API与Vue.js实战

DataTransfer 提供了添加要通过拖放传输的项目的位置。...与需要显式的使元素可拖动一样，它也需要启用放置。要启用元素拖放功能需要侦听 dragover 事件并阻止默认的浏览器操作。 <!...Vue 生命周期 hook，安全的位置应该是已安装的 hook。...设置数据时要用到的重要信息是格式，可以是字符串。在我们的例子中，它被设置为 text/x-kanban-card。存储这个数据格式并导出它，因为在删除卡后获取数据时，Column 组件将会用到它。...最后，将 card 的透明度降低到 0.2 ，以便向用户提供一些反馈，表明该卡实际上已被拉出其原始位置。拖动完成后，再把透明度恢复为 1。现在可以拖动卡片了。接下来添加放置目标。

4.3K1 0

移动端触屏事件

//触摸事件对象 // 1.获取元素 // 2.手指触摸DOM元素事件 var div = document.querySelector('div' ); div.addEventL...移动端拖动的原理：手指移动中，计算出手指移动的距离。...然后用盒子原来的位置 + 手指移动的距离手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置拖动元素三步曲：（1）触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置...(); // 获取元素 var div = document.querySelector('div'); var startX = 0;...startY = e.targetTouches[0].pageY; // 获取元素开始位置 x = div.offsetLeft

2.9K3 0

HTML5 drag和drop的亲手实践

draggable属性: 如果你想让一个元素变得可以拖曳的话，那么你就必须设置它的draggable=true，如下 </div...实践在这里，我们要做的就是一个支持各个图片拖曳来交换位置的玩意，不过，当图片交换位置的时候，不单单是图片交换位置，而是包含图片的容器交换位置。...2.为每个div都设置一个ondragstart函数，当该函数触发的时候，进行初始化操作，比如记录当前的目标对象，拖动目标的y值，以及设置拖动的效果。...node.classList.contains('target')) { return node; } return findTarget(node.parentNode) } 3.为每个...function handleDragLeave(ev) { ev.target.classList.remove('dotted') } 4.为每个div注册ondrog事件和ondragend事件

9403 0

js 实现上下改变父 div 的高度，左右上下动态分割孩子的宽高

一个改变父 div 高度的 arrow，用于上下拖动 , 不能占有位置，所以要绝对定位，并定位到最右下角。...div class="arrow"> 每一个横向的 div 为 hj-transverse-split-div 并相对定位，里面有一个拖动改变左右的 label 为...hj-transverse-split-label ，不能占有位置，所以要绝对定位，并定位到最右边并高为 100%，最后一个横向的 div 不用 hj-transverse-split-label 。...">下每一个横向的 div 为 hj-vertical-split-div 并相对定位，里面有一个拖动改变左右的...label 为 hj-vertical-split-label ，不能占有位置，所以要绝对定位，并定位到最下边并宽为 100%，最后一个竖向的 div 不用再放 hj-vertical-split-label

10K3 0

vue 中基于html5 drag drap的拖放

事情是这样的，右边有各种控件，可以拖动到右边自由区，在自由区内可以随意拖动。案例一：开始的我，so easy！...move (e) { let odiv = e.target // 获取目标元素 // 算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft...let disY = e.clientY - odiv.offsetTop document.onmousemove = e => { // 鼠标按下并移动的事件...// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 let left = e.clientX - disX let top = e.clientY...直接看代码好了，反正是给我自己看的）：左边列表元素可拖动（draggable=’true’）,绑定dragstart(开始事件)，不要给它绑定draging(拖动事件)，这样左边列表元素有拖动属性，但是位置不会改变

1.4K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭