这次给大家带来使用vue做出div拖拽，的注意事项有哪些，下面就是实战案例，一起来看一下。
效果图：
html代码：
<p id="box">                             位置  <br>x:{{val.x}} <br>y:{{val.y}}  <p v-drag="greet" id="drag" :style="style">  //注意这里要通过指令绑定函数将当前元素的位置数据传出来  </p></p>
js代码：
vue.directive('drag',//自定义指令                       {bind:function (el, binding) {        let op = el;  //当前元素        let self = this; //上下文        op.onmousedown = function (e) {         //鼠标按下，计算当前元素距离可视区的距离          let disx = e.clientx - op.offsetleft;          let disy = e.clienty - op.offsettop;          document.onmousemove = function (e) {           //通过事件委托，计算移动的距离             let l = e.clientx - disx;            let t = e.clienty - disy;           //移动当前元素             op.style.left = l + 'px';            op.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;        }      } ,   });  }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样对vue文件进行解析
react 实现单例组件（附代码）
以上就是使用vue做出div拖拽的详细内容。