拖拽盒子随意移动

同时给父元素和需要拖拽的元素进行设置style="position: relative;"

注册指令　

export default (app) => {
  app.directive("drag", {
    mounted(el) {
      let dragBox = el;
      dragBox.onmousedown = (e) => {
        e.preventDefault();
        let disX = e.clientX - dragBox.offsetLeft;
        let disY = e.clientY - dragBox.offsetTop;
        document.onmousemove = (e) => {
          e.preventDefault();
          let left = e.clientX - disX;
          let top = e.clientY - disY;
          dragBox.style.left = left + "px";
          dragBox.style.top = top + "px";
        };

        document.onmouseup = (e) => {
          e.preventDefault();
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },
  });
};

　

  directives: {
    drag(el) {
      let dragBox = el;
      dragBox.onmousedown = (e) => {
        // 如果是输入框就返回
        if (e.target.nodeName == "INPUT" || e.target.nodeName == "TEXTAREA") {
          return;
        }
        e.preventDefault();
        let disX = e.clientX - dragBox.offsetLeft;
        let disY = e.clientY - dragBox.offsetTop;
        document.onmousemove = (e) => {
          e.preventDefault();
          let left = e.clientX - disX;
          let top = e.clientY - disY;
          dragBox.style.left = left + "px";
          dragBox.style.top = top + "px";
        };

        document.onmouseup = (e) => {
          e.preventDefault();
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },
  },

 

　

可参考

https://blog.csdn.net/weixin_58032613/article/details/122759818?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0.topblog&spm=1001.2101.3001.4242.1&utm_relevant_index=3