Vue实现盒子拖拽

Vue实现盒子拖拽

1.封装指令

new Vue({
    directives:{
          drag:{
            bind: function (el) {
              let odiv = el;
              odiv.style.position = "absolute"; // 这一可以定义自己所需要的定位
              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 = () => {
                  document.onmousemove = null;
                  document.onmouseup = null;
                };
              };
          },
        }
    }
})

2.使用

直接v-drag加入标签即可