本文主要是介绍vue-自定义指令-拖拽，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
主要思想： 获取拖拽的dom元素，在oDiv.onmousedown事件内获取鼠标相对dom元素本身的位置：
var disX=ev.clientX-oDiv.offsetLeft;var disY=ev.clientY-oDiv.offsetTop;再通过document.onmousemove事件计算dom元素左上角相对 视口的距离：
var l=ev.clientX-disX;
var t=ev.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';完整代码：
<script>/* vue-自定义指令-拖拽 */Vue.directive('drag',function(){var oDiv=this.el;oDiv.onmousedown=function(ev){var disX=ev.clientX-oDiv.offsetLeft;var disY=ev.clientY-oDiv.offsetTop;document.onmousemove=function(ev){var l=ev.clientX-disX;var t=ev.clientY-disY;oDiv.style.left=l+'px';oDiv.style.top=t+'px';};document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null;};};});window.onload=function(){var vm=new Vue({el:'#box',data:{msg:'welcome'}});};</script>
</head>
<body><div id="box"><div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div><div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div></div>
</body>这篇关于vue-自定义指令-拖拽的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
