vue v-drag 拖动拖拽移动div 拖拽滑动div

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

原创最新推荐文章于 2025-06-21 07:02:03 发布 · 1.3w 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#vue #drag #v-drag #directives #自定义指令

小功能总结专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用自定义指令v-drag实现元素的拖动与滑动功能，详细讲解了v-drag指令的实现原理及应用场景，通过实例代码帮助开发者快速掌握这一实用技巧。

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

<template>
    <div class="drag">
       <div ref="element" class="content" v-drag draggable="false">
          <p>文字网页</p>
       </div>
       <div style="height:2000px;width:100%"></div>
    </div>
</template>
<script >
   export default {
        data(){
            return {
                dd:"",
                inout:""
            }
        },
        directives: {
            drag(el){
                let oDiv = el; //当前元素
                let self = this; //上下文
                //禁止选择网页上的文字
                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;
                    };
                    //return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
                    return false;
                };
            }
        }
   }
</script>
<style>
.drag{
    position: relative;
}
/* position:absolute;这个还是要设的，不然拖动块定不了位置 */
.content{
    position:absolute;
    height:100px;
    width:100px;
    background-color: #67C23A;
    cursor: pointer;
}
</style>