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.ontouchstart = function (e) {
        //鼠标按下，计算当前元素距离可视区的距离
        let disX = e.touches[0].clientX - oDiv.offsetLeft;
        let disY = e.touches[0].clientY - oDiv.offsetTop;


        document.ontouchmove = function (e) {
          //通过事件委托，计算移动的距离
          let l = e.touches[0].clientX - disX;
          let t = e.touches[0].clientY - disY;
          //移动当前元素
          oDiv.style.left = l + 'px';
          oDiv.style.top = t + 'px';
          //将此时的位置传出去
          binding.value({x:e.pageX,y:e.pageY})
        };
        document.ontouchend = function (e) {

          document.ontouchmove = null;
          document.ontouchend = null;
        };
      };
    }
  }
)




//pc端

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;         

      }       

    } ,   

  }); 

  }

原文来自https://segmentfault.com/a/1190000009134142