基于Vue实现拖拽功能

  • Z时代
  • 2024-01-10
  • 分类：综合

本文实例为大家分享了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实现拖拽功能 的全部内容， 来源链接： utcz.com/z/350996.html

回到顶部