v-drag拖拽div

先给需要拖拽的div盒子标签加上v-drag

     <div class="box_mid" v-drag> </div>

<script>
export default {data() {return {};},directives: {drag: {// 指令的定义bind: function(el) {let oDiv = el; // 获取当前元素oDiv.onmousedown = e => {// 算出鼠标相对元素的位置let disX = e.clientX - oDiv.offsetLeft;let disY = e.clientY - oDiv.offsetTop;document.onmousemove = e => {// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = e.clientX - disX;let top = e.clientY - disY;oDiv.style.left = left + 'px';oDiv.style.top = top + 'px';};document.onmouseup = e => {document.onmousemove = null;document.onmouseup = null;};};}}},
</script>

拖拽实则就是改变left和top的距离，

所以在需要拖拽的盒子样式需要加上 position: relative;否则无法改变left和top的值实现拖拽。

v-drag拖拽div相关推荐

JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div(1)解决问题,当在拖拽事件所在的页面按下键盘的ctrl+A全选后,再去拖拽div,浏览器会默认去搜索网页中的内容,拖拽功能就会失效,(搜索网页内容是浏览器的默认行为,所以要想不发生 ...
html div 可鼠标滚动,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
UGUI事件之Drag拖拽事件
UI事件之Drag拖拽事件 ======================================================== 2.UGUI 事件命名空间当我们需要使用 UGUI 中的 ...
vue 拖拽div 自定义div拖拽
js 可拖拽div内容框记录 1.css样式 .dragDrop{width:220px;height:88px;line-height:88px;text-align: center;backgro ...
用鼠标左右拖拽 html,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
onmousedown:鼠标的按下事件 onmouseove:鼠标的移动事件 onmouseup:鼠标的松开事件思路: 想实现鼠标拖拽div移动的效果,就得先获取到div,然后给div绑定鼠标按下的 ...
H5 drag拖拽移动小结及示例
drag api是h5中的新功能,用来拖拽页面元素挺有用的,先小结一下首先,基本概念声明,概念部分我是借鉴这篇文章 https://www.cnblogs.com/wuya16/p/DragApi ...
JS实现可拖拽div
注意点可拖拽元素为绝对定位分别监听mousedown,mousemove,mouseup三个事件 mousemove事件要判断dragging的值 <div id="box&quo ...

v-drag拖拽div

v-drag拖拽div相关推荐

最新文章

热门文章