vue中实现div自由拖拽

 给div绑定一个自定义指令 v-drag

给div设置绝对定位

写自定义指令

//自定义指令

directives: {

        drag: {

            // 指令的定义

            bind: function(el) {

                let oDiv = el;  // 获取当前元素

                oDiv.onmousedown = (e) => {

                    console.log('onmousedown')

                    // 算出鼠标相对元素的位置

                    let disX = e.clientX - oDiv.offsetLeft;

                    let disY = e.clientY - oDiv.offsetTop;

                    document.onmousemove = (e) => {

                        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置

                        let left = e.clientX - disX;

                        let top = e.clientY - disY;

                        oDiv.style.left = left + 'px';

                        oDiv.style.top = top + 'px';

                    };

                    document.onmouseup = (e) => {

                        document.onmousemove = null;

                        document.onmouseup = null;

                    }

                }

            }

        }

    },