How to use Vue to implement drag and drop effect

This time I will show you how to use Vue to achieve the drag and drop effect. What are the precautions for using Vue to achieve the drag and drop effect? ​​The following is a practical case, let's take a look.

Rendering

Clear the difference between clientY pageY screenY layerY offsetY

When we want to make a drag When dragging this effect, we need to distinguish the difference between these attributes. These attributes are all used to calculate the offset value of the mouse click. We need to understand them before we can continue to realize our dragging effect

clientY refers to the distance from the upper left corner of the visible page

pageY refers to the distance from the upper left corner of the visible page (not affected by page scrolling)
screenY refers to the distance from the upper left corner of the screen
layerY refers to the distance to the nearest positioned upper left corner of it or its parent element.
offsetY refers to the distance to its own upper left corner.
A picture will give you a simple understanding.

Difference

After we briefly understand these attributes, there are several attributes that need to be distinguished.

Different pointsclientYDistance from the upper left corner of the pageAffected by page scrollingpageYThe distance from the upper left corner of the pageNot affected by page scrolling

Similar points

layerYoffsetYIE browser

##Same points	Different points
The distance from the upper left corner of the element	Affected by the positioning of the element, the upper left corner of the first positioned element will be found from this element upward
The distance from the upper left corner of the element	Calculate the upper left corner relative to this element, regardless of positioning issues, the inner intersection point is calculated. It is a unique attribute of

The difference between layerY and offsetY

Implement drag-and-drop function

Now that we are familiar with the meaning of these offset properties, let’s get to our focus. Without further ado, let’s get straight to the code

// darg.html

<style>
  #app{
    position: relative;   /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background: #666;    /*设置一下背景*/
  }
</style>

  <p>    <!--绑定按下事件-->
    {{positionX}}
    {{positionY}}
  </p>

//main.js
let app = new Vue({
  el:'#app',
  data:{
    positionX:0,
    positionY:0,
  },
  methods:{
    move(e){
      let op = e.target;    //获取目标元素
      
      //算出鼠标相对元素的位置
      let disX = e.clientX - op.offsetLeft;
      let disY = e.clientY - op.offsetTop;
      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;  
        let top = e.clientY - disY;
        
        //绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;
        
        //移动当前元素
        op.style.left = left + 'px';
        op.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }  
  
  },
  computed:{},
});

Of course, we can bind it as a custom instruction, so that it can be implemented in the form of a calling instruction Drag effect, the following is the code to define custom instructions

// darg.html

<style>
  #app{
    position: relative;   /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background: #666;    /*设置一下背景*/
  }
</style>

  <p>    <!--实现用指令形式实现拖拽效果-->
    
  </p>

//main.js
let app = new Vue({
  el:'#app',
  data:{},
  methods:{},
  directives: {
    drag: {
      // 指令的定义
      bind: function (el) {
        let op = el;  //获取当前元素
        op.onmousedown = (e) => {
          //算出鼠标相对元素的位置
          let disX = e.clientX - op.offsetLeft;
          let disY = e.clientY - op.offsetTop;
          
          document.onmousemove = (e)=>{
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX;  
            let top = e.clientY - disY;
           
            //绑定元素位置到positionX和positionY上面
            this.positionX = top;
            this.positionY = left;
        
            //移动当前元素
            op.style.left = left + 'px';
            op.style.top = top + 'px';
          };
          document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  }
});

Finally

At this point we have implemented the drag effect with Vue , we used two different methods to implement drag and drop, but in fact, we need to clarify the differences between pageY, screenY, clientY, layerY, offsetY, etc. Of course, we also learned some methods of Vue, such as custom instructions.

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

Recommended reading:

Summary of Node.js file encoding format conversion methods

How to add customer service to the WeChat applet Button

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