Implementation code of vue module drag and drop effect

The content of this article is about the implementation code of the drag and drop effect of the vue module. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

It just so happened that I was asked about implementing the drag-and-drop effect in a previous interview.

During the interview, I simply answered the implementation method and logic.

Now that I have nothing to do, I have implemented this thing.

The principle is very simple and it is very convenient to write.

Data-driven, create an array, the initial length of the array is 1

When dragging is triggered, add an object to the array, the object with subscript 0 is dragged, and the new one is also Leave it in its original position and wait for the next drag.

Without further ado, here is the code

<template>
    <div>
      <div @mousedown="move($event,index)" v-for="(x,index) in i">
        <span v-if="index+1 !== i.length">{{index+1}}</span>
        <input v-model="x.input">
      </div>
      {{i}}
    </div>
</template>

<script>
    export default {
        name: "index",
      data(){
          return{
            positionX:0,
            positionY:0,
            i:[
              {input:''}
            ]
          }
      },
      methods:{
          move(e,x){
            let odiv = e.target;        //获取目标元素
            //算出鼠标相对元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            let flag = true;
            document.onmousemove = (e)=>{       //鼠标按下并移动的事件
              if(flag && x === this.i.length-1){
                flag = false;
                this.i.push({input:''})
              }
              //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
              let left = e.clientX - disX;
              let top = e.clientY - disY;
              //绑定元素位置到positionX和positionY上面
              this.positionX = top;
              this.positionY = left;
              //移动当前元素
              odiv.style.left = left + 'px';
              odiv.style.top = top + 'px';
            };
            document.onmouseup = (e) => {
              document.onmousemove = null;
              document.onmouseup = null;
            };
          }
      }
    }
</script>

<style scoped>
  .view{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f8f8f8;
    .x{
      width: 250px;
      height: 50px;
      top: 50px;
      left: 10px;
      position: absolute;
      background: red;
      color: yellow;
    }
  }
</style>

A simple demo, which can be enriched if used later, such as triggering events by dragging the length.

Input can be replaced with subcomponents. Here we provide a low-level implementation method

Input can be replaced with sub-components. Here is a low-level implementation

The above is the detailed content of Implementation code of vue module drag and drop effect. For more information, please follow other related articles on the PHP Chinese website!