基于Vue实现元素拖拽效果

在实现拖拽效果时需要先理解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>

实现效果截图

这里卿洋
愿喜❤️

最后编辑于：2018.11.13 11:58:12