本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下

效果图:

基于Vue实现拖拽功能

HTML代码:

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

JS代码:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
Vue,拖拽

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“基于Vue实现拖拽功能”

暂无“基于Vue实现拖拽功能”评论...