vue 自定义拖拽

  Vue.directive('drag',//自定义指令
    {
      bind: function (el, binding) {
        let oDiv = el;   //当前元素
        let self = this;  //上下文
        oDiv.onmousedown = function (e) {
          //鼠标按下，计算当前元素距离可视区的距离
          let disX = e.clientX - oDiv.offsetLeft;
          let disY = e.clientY - oDiv.offsetTop;



          document.onmousemove = function (e) {
            //通过事件委托，计算移动的距离
            let l = e.clientX - disX;
            let t = e.clientY - disY;

            var xMax= document.documentElement.clientWidth-100;
            var xMin = 0;
            var yMax = document.documentElement.clientHeight-100;
            var yMin = 50;

            if(l>=xMax){
              l=xMax;
            }else if(l<=xMin){
              l=xMin;
            }

            if(t>=yMax){
              t=yMax;
            }else if(t<=yMin){
              t=yMin;
            }


            //移动当前元素
            oDiv.style.left = l + 'px';
            oDiv.style.top = t + 'px';
            
            //将此时的位置传出去
            binding.value({x: e.pageX, y: e.pageY})
          };
          document.onmouseup = function (e) {

            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  );

以上是自定义事件的全过程，还可以设置可拖动的区域

<div draggable="false" class="content layout-vertical center" v-drag>

      <img draggable="false" src="../../assets/images/calling.png"  style="width: 32px;height: 39px"/>
      <span class="margin-top-10px">正在通话... </span>

  </div>

以上是用法，通过v-drag来指定可拖动的控件，值得注意的是还设置了draggable='false'，这是为了关闭元素默认的拖拽事件，例如图片本身的拖拽事件会与当前的事件冲突