本文主要讲解关于Vue自定义v-draggable指令实现可自由拖动的盒子相关内容，让我们来一起学习下吧！

需求：

这里我们想要使这个盒子可以随意的上下左右拖动

需要我们在vue项目中创建一个自定义指定v-draggable,废话不多说直接上代码：

在main.js中

//引入Vue import Vue from 'vue' Vue.directive('draggable', { bind: function (el, binding, vnode) { var isDragging = false; var offsetX = 0; var offsetY = 0; el.addEventListener('mousedown', function (event) { isDragging = true; offsetX = event.clientX - el.offsetLeft; offsetY = event.clientY - el.offsetTop; }); document.addEventListener('mousemove', function (event) { if (isDragging) { var left = event.clientX - offsetX; var top = event.clientY - offsetY; el.style.left = left + 'px'; el.style.top = top + 'px'; vnode.context.left = left; vnode.context.top = top; } }); document.addEventListener('mouseup', function (event) { isDragging = false; }); } }); 

然后直接在div标签上使用v-draggable就可以实现拖动了(注意给div设置宽高哦)

<div class="draggle-test" v-draggable></div> 

以上就是关于Vue自定义v-draggable指令实现可自由拖动的盒子相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.frpkj.com），学习愉快哦！