vue实现拖拽——自定义指令

在想要拖拽的盒子上 添加自定义指令 例如 v-drag

<div id="app">
    <input type="text" name=""  v-drag>
</div>

//注册局部组件指令

directives: {
   
    drag: function(el) {
   
        let dragBox = el; //获取当前元素
        dragBox.onmousedown = e => {
   
            e.preventDefault()
            //算出鼠标相对元素的位置
            let disX = e.clientX - dragBox.offsetLeft;
            let disY = e.clientY - dragBox.offsetTop;
            document.onmousemove = e => {
   
                //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX;
                let top = e.clientY - disY;
                //移动当前元素
                dragBox.style.left = left + "px";
                dragBox.style.top = top + "px";
            };
            document.onmouseup = e => {
   
                    e.preventDefault()
                    //鼠标弹起来的时候不再移动
                    document.onmousemove = null;
                    //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）  
                    document.onmouseup = null;
            };
        };
    }
},

图为下

完整代码如下