<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;        }      } ,   });  }