How to use Vue to implement drag and drop function

This time I will show you how to use Vue to implement the drag and drop function, and what are the precautions for using Vue to implement the drag and drop function. The following is a practical case, let's take a look.

Rendering:

HTML code:

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

JS code:

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

I believe you will read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use filter in vue

##How to use vue to determine the class of dom

The above is the detailed content of How to use Vue to implement drag and drop function. For more information, please follow other related articles on the PHP Chinese website!