博客

在实现拖拽效果时需要先理解clientY pageY screenY layerY offsetY的区别
clientY 指的是距离可视页面左上角的距离
pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
screenY 指的是距离屏幕左上角的距离
layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
offsetY 指的是距离它自己左上角的距离
思路
onmousedown：鼠标按下事件
onmousemove：鼠标移动事件
onmouseup：鼠标抬起事件
拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下

拖拽状态 = 鼠标在元素上按下的时候{      
    记录下鼠标的x和y坐标      
    记录下元素的x和y坐标      
   }   
鼠标在元素上移动的时候{      
    元素y = 现在鼠标y - 原来鼠标y + 原来元素y      
    元素x = 现在鼠标x - 原来鼠标x + 原来元素x      
    }      
鼠标在任何时候放开的时候{      
   鼠标弹起来的时候不再移动      
} 

直接上代码，代码中有注释

<template>
    <div class="drag">
        <div class="drag_box" v-drag></div>
    </div>
</template>

<script>
export default {
    name: "drag",
    data() {
        return {};
    },
    //注册局部组件指令
    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 = e => {
                      //鼠标弹起来的时候不再移动
                      document.onmousemove = null;
                     //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）  
                    document.onmouseup = null;
                };
            };
        }
    }
};
</script>
<style scoped>
.drag {
    width: 100%;
    height: 500px;
    background-color: #fff;
}
.drag_box {
    width: 150px;
    height: 90px;
    border: 1px solid #666;
    background-color: #ccc;
    /* 使用定位，脱离文档流 */
    position: relative;
    top: 100px;
    left: 100px;
    /* 鼠标移入变成拖拽手势 */
    cursor: move;
    z-index: 3000;
}
</style>