基于Vue实现拖拽功能

<div id="box">                             位置  <br>x:{{val.x}} <br>y:{{val.y}}  <div v-drag="greet" id="drag" :style="style">  //注意这里要通过指令绑定函数将当前元素的位置数据传出来  </div></div>

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;           //移动当前元素             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;           };        };      }    }  );  window.onload = function () {    let vm = new Vue({      el: '#box',      data: {        val: '123',        style: {          width: '100px',          height: '100px',          background: 'aqua',          position: 'absolute',          right: '30px',          top: 0        }      },      methods:{      //接受传来的位置数据，并将数据绑定给data下的val        greet(val){          vm.val = val;        }      } ,   });  }