Implementierungscode des Drag-and-Drop-Effekts des Vue-Moduls

Der Inhalt dieses Artikels befasst sich mit dem Implementierungscode des Drag-and-Drop-Moduls. Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

Ich wurde in einem früheren Interview zufällig nach der Implementierung des Drag-and-Drop-Effekts gefragt.

Während des damaligen Interviews antwortete ich lediglich auf die Implementierungsmethode und -logik.

Da ich nun nichts mehr zu tun habe, habe ich dieses Ding umgesetzt.

Das Prinzip ist sehr einfach und das Schreiben ist sehr bequem.

Datengesteuert, erstellen Sie ein Array, die anfängliche Länge des Arrays beträgt 1

Wenn das Ziehen ausgelöst wird, fügen Sie ein Objekt zum Array hinzu, das Objekt mit dem Index 0 wird gezogen und das Neues ist ebenfalls vorhanden. Belassen Sie es in seiner ursprünglichen Position und warten Sie auf das nächste Ziehen.

Ohne weitere Umschweife, hier ist der 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>

Eine einfache Demo, die später erweitert werden kann, z. B. durch das Auslösen von Ereignissen durch Ziehen der Länge.

Eingabe kann durch Unterkomponenten ersetzt werden. Hier stellen wir eine Implementierung auf niedriger Ebene bereit.

Eingabe kann durch eine Unterkomponente ersetzt werden. Hier ist eine Low-Level-Implementierung

Das obige ist der detaillierte Inhalt vonImplementierungscode des Drag-and-Drop-Effekts des Vue-Moduls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!