vue项目实现鼠标拖拽功能

<divid="back"@mousedown="draggableFun($event)"></div>

//e.clientX和e.clientY 相对于浏览器可视区的位置
//元素.offsetLeft\ 元素.offsetTop  获取元素、节点位置 参照已定位的祖先元素的位置，
//当所有祖先都未定位则参照 body 元素
//原理：鼠标移动前后相对于浏览器可视区的位置的差值+元素相对于已定位的祖先元素的位置// 鼠标拖拽事件
const draggableFun = (val) => {let div = document.getElementById("back");let dragFlag = false;let x, y;div.onmousedown = function (e) {dragFlag = true;e = e || window.event;// 获取鼠标在元素上的位置（鼠标按下时在元素上得位置）x = e.clientX - div.offsetLeft;y = e.clientY - div.offsetTop;};div.onmousemove = function (e) {if (dragFlag) {e = e || window.event;div.style.left = e.clientX - x + "px";div.style.top = e.clientY - y + "px";}};// 鼠标抬起事件div.onmouseup = function (e) {dragFlag = false;};
};

当鼠标按下鼠标移动的时候，记录移动中的 x、y 值，那么这个被拖拽的 dom 的 top 和

left 值就是：

top=鼠标按下时记录的 dom 的 top 值+（移动中的 y 值 - 鼠标按下时的 y 值）

left=鼠标按下时记录的 dom 的 left 值+（移动中的 x 值 - 鼠标按下时的 x 值）

vue项目实现鼠标拖拽功能相关推荐

js实现鼠标拖拽功能基本思路
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒. onmousedown:鼠标按下事件 onmousemove:鼠标移动事件 onmouseup:鼠标抬起事件拖拽的基本原 ...
iview+vue实现表头的拖拽功能
一.项目需求: 需求:表格实现表头拖拽.排序.树形表格展示.下载Excel.下载CSV格式的数据项目里用到的技术:iview的table+vue 参考文章:https://www.cnblogs.c ...
python鼠标拖拽功能_selenium鼠标移动、拖拽、双击、长按等操作
selenium鼠标操作靠的是ActionChains(行为链)类,前面的文章我们已经介绍过,详情可以看ActionChains类,selenium的鼠标操作就不一一举例了,本节把鼠标移动.拖拽.双击 ...
vue项目之 el-table 拖拽行
一.功能表格的任意行都可以拖拽位置:默认不能拖拽表格,点击拖拽按钮可以拖拽. 二.代码 npm 下载 sortablejs 页面按钮: 页面el-table js引入 sortablejs data ...
Unity 鼠标拖拽功能
继承3个处理拖拽方法的接口IBeginDragHandler, IDragHandler, IEndDragHandler /// <summary>/// 实现接口的OnBeginDra ...
【WPF】鼠标拖拽功能DragOver和Drop
在Winform里面实现拖入功能只要设置控件AllowDrop=true; 然后实现方法 //拖入 private void txtInputPath_DragOver(object sender, ...
js简单实现鼠标拖拽功能：盒子可以跟着鼠标移动位置
实现的原理: 根据上面的图可以算出移动后的盒子的left和top: 鼠标距离边界的值: ev.pageY - box.top ev.pageX - box.left box2.top = ev2.pa ...
python鼠标拖拽功能_Python wxpython模块响应鼠标拖动事件操作示例
本文实例讲述了Python wxpython模块响应鼠标拖动事件操作.分享给大家供大家参考,具体如下: wxpython鼠标拖动事件小案例: #coding:UTF-8 import wx app = ...
用JavaScript原生手写div的鼠标拖拽功能
一.三个事件onmousedown(鼠标按下),onmousemove(鼠标移动),onmouseup(鼠标松) 鼠标按下时 box.onmousedown = function(e) {consol ...

vue项目实现鼠标拖拽功能

vue项目实现鼠标拖拽功能相关推荐

最新文章

热门文章