vue拖拽事件

1
最外面的div 给一个

class="drag"

2
把需要拖拽的模块用<div class="drag-box" v-drag draggable="false"></div>包起来
3.

directives: {
            drag(el){
                let oDiv = el; //当前元素
                //禁止选择网页上的文字
                document.onselectstart = function() {
                    return false;
                };
                oDiv.onmousedown = function(e){
                    //鼠标按下，计算当前元素距离可视区的距离
                    let disX = e.clientX - oDiv.offsetLeft;
                    let disY = e.clientY - oDiv.offsetTop;
                    document.onmousemove = function(e){
                        //计算移动的距离
                        let l = e.clientX - disX;
                        let t = e.clientY - disY;
                        //移动当前元素
                        oDiv.style.left = l + "px";
                        oDiv.style.top = t + "px";
                    }
                    document.onmouseup = function(e){
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                    //防止onmouseup失效
                    return false;
                };
            }
        },

4

.drag{
    position: relative;
}
.drag-box{
    position:absolute;
    cursor: pointer;
}

标签：function,vue,oDiv,drag,let,事件,onmouseup,document,拖拽
来源： https://blog.csdn.net/qq_41551150/article/details/120765929