基于Vue实现模块拖拽（简单版）

1.使用directives绑定一个拖拽(drag)事件, 与data 同级

在需要用到指令的元素中添加v-指令名即可(v-drag)

 

 实现效果如下：

 directives: {
        drag: {
            bind: function(el) {
                let oDiv = el; 
                oDiv.onmousedown = (e) => {
                    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;
                    }
                }
            }
        }
    },

2.全局应用：

 创建拖拽文件，drag.js

let drag = {
  bind: function (el) {
    let odiv = el //获取当前元素
    odiv.onmousedown = (e) => {
      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) => {
        console.log(e)
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  },
}
export default drag

在main.js找那个引入指令文件 drag.js，并创建全局指令

//创建的drag.js文件
import '/test/drag.js'

 在需要用到指令的元素中添加v-指令名即可(v-drag)

复杂版：

dialog对话框 可移动拖拽变大变小，去掉覆盖层、可操作底层_dialog 可移动-优快云博客