033获取drag元素在drop元素上的移动位置的方案

最新推荐文章于 2023-04-19 14:55:58 发布

阿赛工作室

最新推荐文章于 2023-04-19 14:55:58 发布

阅读量330

点赞数

分类专栏：物联网项目开发笔记 Vue3 CSS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_25753445/article/details/127764934

版权

本文介绍了一种方案，如何在JavaScript中获取drag元素在drop元素上的移动位置。通过在drop元素上添加dragover事件，并利用事件对象获取DOM信息，比较鼠标在元素内的位置比例来确定drop位置。

摘要由CSDN通过智能技术生成

033获取drag元素在drop元素上的移动位置的方案

在drop元素上新增dragover事件

@dragover.stop.native="handlerDragover($event, item)"这里的.stop修饰符用来防止影响父元素，.native表示作用于在当前draggable元素上

通过dragover中的$Event获取当前drop的一些元素Dom信息

这里我们需要以下几个信息

e.offsetX,// 相对于元素自身的鼠标坐标系
e.offsetY,
e.target.clientHeight,// 元素自身的宽高
e.target.clientWidth,

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿赛工作室

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
033获取drag元素在drop元素上的移动位置的方案

【代码】033获取drag元素在drop元素上的移动位置的方案。
复制链接

扫一扫

专栏目录

draggable实现拖拽、禁止拖拽、拖拽后元素重新排序到指定位置

日常笔记/总结/系列知识梳理

10-20

2268

draggable的github地址// 安装 npm install vuedraggable // 引入 import draggable from 'vuedraggable'

vue foreach用法_Vue入门系列之Vue列表渲染及条件渲染实战

weixin_39890543的博客

12-06

630

3.1. 条件渲染有时候我们要根据数据的情况，决定标签是否进行显示或者有其他动作。最常见的就是，表格渲染的时候，如果表格没有数据，就显示无数据。如果有数据就显示表格数据。Vue帮我们提供了一个v-if的指令，帮助我们完成判断的模板处理。<div id="app"> <h1 v-if="ok">Yesh1> <h1 v-else>Noh1&gt...

参与评论您还未登录，请先登录后发表或查看评论

JS中使用DOM-Drag捕捉组件位置坐标

遮住阳光

09-08

773

JS中使用DOM-Drag捕捉组件位置坐标 1.使用Drag.init设置被拖放的组件； 2.调用组件的onDrag、onDragStart、onDragEnd方法分别取得组件拖放过程中、开始拖放时、结束拖放时的位置坐标。 DOMDragEx7.html: 程序代码 DOM-Drag ex7 ...

元素拖拽与定位

shuxiaoxii的博客

01-13

621

拖拽, js

vue3 draggable拖拽

weixin_43363801的博客

09-24

361

vue3 拖拽组件文档 https://www.itxst.com/vue-draggable-next/tutorial.html

通过angular CDK实现页面元素拖放的步骤详解

10-15

在Angular开发中，为了实现页面元素的拖放功能，我们可以利用Angular CDK（Component Dev Kit）中的`@angular/cdk/drag-drop`模块。Angular CDK是一个工具集，它提供了实现常见交互模式的抽象，而不涉及具体的呈现...

gwt 之dualListField (drag and drop)

11-30

4. **实现拖放逻辑**：在DragStartHandler中，获取被选中的项，并记录其原始位置。在DropHandler中，根据拖放事件的数据，更新数据模型并将项移动到目标列表。 5. **同步界面**：每次数据模型改变后，都需要更新两...

Sliverlight 微软Drag and drop 实例

11-04

其中，拖放（Drag and Drop）功能是提升用户体验的重要一环，让用户能够以直观的方式移动元素或数据。本实例将深入探讨如何在 Silverlight 中实现拖放操作，并通过提供的项目文件进行实践。 **1. 拖放基础** 在 ...

一个JavaScript库让文件能够拖放到任何HTML元素上

08-08

6. `drop`：当被拖动元素被放置到目标元素上时触发，这时可以读取拖放的文件数据并进行相应的操作，如上传到服务器。此外，还需要处理File API，包括`FileReader`对象用于读取文件内容，`FormData`对象用于构造...

vue中使用拖拽drag

妖尾攻城狮的博客

07-05

4474

被拖拽的dom dragable="true" @dragstart="drag" 拖入的dom @drop="drop" @dragover="dragover" @dragleave="dragleave"  <div v-for="o in item.staffs" :key="o.id"

JqueryUI_draggable 和droppable获取源DOM元素和当前DOM元素

阿瑟与非

06-04

4675

效果图：（拖拽a到b打印结果如图，源码在后面）基础知识：所有的事件回调函数都有两个参数：event和uievent: 浏览器原生的事件； ui: 一个JQuery的ui对象。其中ui 有以下属性：a) ui.helper: 正在拖动的元素的JQuery包装对象, ui.helper.context可以获取到原生的DOM元素.b) ui.position: ui.helper(也就是我们要拖动的元...

vuedraggable制作任务看板，实现数据拖动并获取拖动后的数据

yht2004123的博客

04-19

3352

在网上看了很多关于拖拽的资料，基本上都没什么帮助，经过本人实践，终于搞定了元素拖拽的问题，在拖拽时可以获取拖拽的数据。2、安装vuedraggable插件：npm insall vuedraggable。1、vue版本为vue2。

wpf,后台触发按钮点击以及拖动

weixin_30429201的博客

07-03

1068

触发按钮Click MouseButtonEventArgs args = new MouseButtonEventArgs(Mouse.PrimaryDevice, 0, MouseButton.Left); args.RoutedEvent = But...

WPF拖动总结

weixin_33979203的博客

05-07

128

这篇博文总结下WPF中的拖动，文章内容主要包括： 1.拖动窗口 2.拖动控件 Using Visual Studio 　　2.1thumb控件　　2.2Drag、Drop（不连续，没有中间动画）　　2.3拖动一个控件　　2.4让一个窗口内的所有(指定的)控件可拖动 3.Expression Blend X实现拖动(Best Practice) Update: Move and...

【vue.draggable】判断被拖拽元素是否在目标区域内并阻止拖拽

EStringDoggi的博客

09-07

3618

被拖拽区域（右侧）有@add事件（也就是draggable标签里面），可以通过判断事件第一个参数event.originalEvent.cancelable是否为false，如果为false，配合event.newIndex去删除目标分组的对应元素。的拖拽特性，如果元素从左边拖到右边了，但是又移出了右侧区域（也许是用户反悔了），我希望被拖拽元素不要插入到右侧。通过比对我发现了event.originalEvent.cancelable这个属性在是否目标区域放置时有区别。插件默认操作是继续添加到模板区域的。

【重点突破】——Drag&Drop拖动与释放

柳柳66的博客

10-03

518

【重点突破】——Drag&Drop拖动与释放一、引言在学习HTML5新特性的时候，学到了Drag&Drop这两种拖放API，这里根据拖动的是“源对象”还是“目标对象”做两个小练习，主要是为了理解与应用HTML5为拖放行为提供的7个事件。二、七个事件 HTML5为拖放行为提供了7个事件，分为两组：拖动的源对...

Vue事件修饰符.native及其他

sxq_110

03-02

1035

.stop调用event.stoppropagation()。(阻止事件冒泡) eg:触发子元素事件时不会冒泡影响到外层父元素事件 .prevent调用event.preventDefault()。(阻止默认事件) eg:<input type="submit" v-on:click.stop.prevent="onSubmit"/>提交不重载页面 @keyup监听键盘弹起事件 @keydown监听键盘按下事件 @keyup.enter(键码)监听回车键弹起事件 e...

vue中阻止冒泡事件 @click.stop.native

wuningw的博客

11-12

3448

<el-switch v-model="scope.row.isRecommend" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="changeStatus($even...

怎么实时获取元素在页面的位置