vue拖拽事件

最新推荐文章于 2025-06-21 07:02:03 发布

大只羊羊

最新推荐文章于 2025-06-21 07:02:03 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41551150/article/details/120765929

vue 专栏收录该内容

6 篇文章

订阅专栏

在这里插入图片描述

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;
                };
            }
        },

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