vue全局自定义拖拽指令

最新推荐文章于 2025-07-29 09:14:48 发布

原创最新推荐文章于 2025-07-29 09:14:48 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue

日常问题记录专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中创建一个全局的自定义拖拽指令，通过JavaScript实现元素的拖放功能，增强用户体验。内容包括指令的注册、绑定、事件监听以及拖放逻辑的实现。

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


// 全局自定义拖拽组件
export default (Vue) => {
    Vue.directive('drag', {
        //1.指令绑定到元素上回立刻执行bind函数，只执行一次
        //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
        bind: function (el, elementObj) {
            let dragBox = el; //获取当前元素
            dragBox.style.position = 'absolute'; // 拖拽元素使用定位，脱离文档流
            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 = e => {
                    //鼠标弹起来的时候不再移动
                    document.onmousemove = null;
                    //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
                    document.onmouseup = null;
                    // 对外暴露元素相对于父级位置
                };
                e.preventDefault();
            };
        }
    });
}