vue中使用自定义指令实现元素拖动功能

自定义指令实现

directives: {
    drag: {
      // 指令的定义
      bind: function(el) {
        var odiv = el; // 获取当前元素
        var dragFlag = false;
        var x, y;
        odiv.style.cursor = "move";
        odiv.onmousedown = (e) => {
          e = e || window.event;
          x = e.clientX - odiv.offsetLeft;
          y = e.clientY - odiv.offsetTop;
          dragFlag = true;
          document.onmousemove = (e) => {
            if (dragFlag) {
              e = e || window.event;
              odiv.style.left = e.clientX - x + "px";
              odiv.style.top = e.clientY - y + "px";
            }
          };
          document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
            dragFlag = false;
          };
        };
      }
    }
  }

<div style="position: relative;">
	<div v-drag style="width:200px;height:200px;background:red">div>
div>

完成！
注意：如果用在elementUI封装的组件上有bug，会出现延迟的情况。适用于原生dom元素使用