<div id="box">       
 位置
 <br>x:{{val.x}} <br>y:{{val.y}}
 <div v-drag="greet" id="drag" :style="style">
 //注意這里要通過指令綁定函數(shù)將當前元素的位置數(shù)據(jù)傳出來
 </div>
</div>

Vue.directive('drag',//自定義指令     

 {bind:function (el, binding) {
  let oDiv = el; //當前元素
  let self = this; //上下文
  oDiv.onmousedown = function (e) {
   //鼠標按下，計算當前元素距離可視區(qū)的距離
   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:{
  //接受傳來的位置數(shù)據(jù)，并將數(shù)據(jù)綁定給data下的val
  greet(val){
   vm.val = val;
  }
  } ,
 });
 }