vue中自定义指令，弹框拖拽

最新推荐文章于 2024-03-07 17:25:56 发布

ouyang丶

最新推荐文章于 2024-03-07 17:25:56 发布

阅读量245

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/ou_change/article/details/114674376

本文介绍了一种在Vue中实现元素拖拽的方法，通过自定义指令的方式，使得开发者可以轻松地为页面元素添加拖拽功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="wrap" ref="wrap" v-drag></div>
directives: {
    drag: function (el) {
        let dragBox = el; //获取当前元素
        dragBox.onmousedown = e => {
            //算出鼠标相对元素的位置
            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 = () => {
                //鼠标弹起来的时候不再移动
                document.onmousemove = null;
                //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
                document.onmouseup = null;
            };
        };
    }
},
————————————————
版权声明：本文为优快云博主「ouyang丶」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ou_change/article/details/113388848