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

最新推荐文章于 2024-09-10 09:52:47 发布

who_become_gods

最新推荐文章于 2024-09-10 09:52:47 发布

阅读量318

点赞数

本文链接：https://blog.csdn.net/who_become_gods/article/details/108529481

版权

本文介绍了如何在Vue中使用自定义指令v-drag实现元素的拖拽功能。通过注册局部组件指令，实现拖放操作，为需要拖拽的盒子添加v-drag指令，从而实现交互式的用户体验。

摘要由CSDN通过智能技术生成

在想要拖拽的盒子上添加自定义指令例如 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;
            };
        };
    }
},