Einfache Implementierung von Vue Drag & Drop

 <MyShuttle:dataOrigin='[
          {
            Name: "Daten 001",
            ID: "Nummer 001",
          },
          {
            Name: "Daten 002",
            ID: "Nummer 001",
          },
          {
            Name: "Daten 003",
            ID: "Nummer 001",
          }]' 
          
      :Leerzeichen='[{
            Name:"Rechts 001",
            ID:"Rechts 001",
            }]' />

@dragenter.prevent @dragover.prevent
// Verhindern Sie, dass der Browser dieses Verhalten standardmäßig verwendet, da sonst ein Kreuz angezeigt wird, was nicht schön ist.

@dragleave.stop="dragleave($event, 'main')"

@dragend.stop="dragEnd($event, item)"

<Vorlage>
  <div Klasse="MeinShuttle">
    <div Klasse="MeinShuttleLeft">
      <div class="title">Datenquelle</div>
      <div Klasse = "dataBox" @dragleave.stop = "dragleave($event, 'main')">
        <div v-for="(item, i) in dataOrigin" :key="i" class="dataList" ziehbar @dragenter.prevent
          @dragover.prevent @dragstart.stop="dragstart($event, item)"
          @dragend.stop="dragEnd($event, item)">
          {{ item.Name}}
        </div>
      </div>
    </div>
    <div Klasse="MyShuttleCenter"></div>
    <div Klasse="MeinShuttleRechts">
      <div class="title">Datenquelle</div>
      <div ref="MyShuttleRight" class="dataBox">
        <div v-for="(item, i) in spaceList" :key="i" class="dataList" ziehbar @dragenter.prevent
          @dragover.prevent>
          {{ item.Name}}
        </div>
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: '',
  Komponenten: {},
  Requisiten: {
    Datenursprung: {
      Typ: Array
    },
    Raum: {
      Typ: Array
    }
  },
  Daten() {
    zurückkehren {
      Raumliste: dieser.Raum,
      isDragStatus: false
    }
  },
  berechnet: {},
  betrachten: {},
  erstellt() { },
  montiert() { },
  Methoden: {
    dragleave(e, Element) {
      // konsole.log(e, Element)
      wenn (Element === 'Haupt') {
        this.isDragStatus = true
      } anders {
        this.isDragStatus = false
      }
      // konsole.log(dies.istDragStatus)
    },
    dragstart(e, Element) {
      // konsole.log(e, Element)
    },
    dragEnd(e, Element) {
      const top = this.$refs.MyShuttleRight.getBoundingClientRect().top
      const right = this.$refs.MyShuttleRight.getBoundingClientRect().right
      const bottom = this.$refs.MyShuttleRight.getBoundingClientRect().bottom
      const left = this.$refs.MyShuttleRight.getBoundingClientRect().left
      console.log(oben, rechts, unten, links)
      console.log(e.clientX, e.clientY, Element)
      if (this.isDragStatus && e.clientY > oben && e.clientY < unten && e.clientX > links && e.clientX < rechts) {
        this.spaceList.push(Element)
        Konsole.log(diese.spaceList.indexOf(Element))
      }
    }
  }
}
</Skript>

<style scoped lang="scss">
.MeinShuttle {
  Breite: 100 %;
  Höhe: 308px;

  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
  // Gemeinsamer Stil für linke und rechte Boxen.MyShuttleLeft,
  .MeinShuttleRechts {
    Rand: 1px durchgezogen #dddddd;
    Rahmen-Zusammenbruch: Zusammenbruch;
    .Titel {
      Box-Größe: Rahmenbox;
      Breite: 100 %;
      Höhe: 40px;
      Hintergrund: #f5f5f5;
      Rahmenradius: 4px 4px 0px 0px;
      Rahmen unten: 1px durchgezogen #dddddd;
      Polsterung: 10px 16px;
      Schriftgröße: 14px;
      Schriftfamilie: PingFangSC-Regular, PingFang SC;
      Schriftstärke: 400;
      Farbe: #333333;
      Zeilenhöhe: 20px;
    }
    .dataBox {
      Breite: 100 %;
      Höhe: 228px;
      Überlauf: automatisch;
      Polsterung: 6px 0;
      .Datenliste {
        Breite: 96%;
        Höhe: 40px;
        Box-Größe: Rahmenbox;
        Schriftgröße: 14px;
        Schriftfamilie: PingFangSC-Regular, PingFang SC;
        Schriftstärke: 400;
        Farbe: #666;
        Zeilenhöhe: 20px;
        Rand: 0,2 % 10px;
        Polsterung: 10px 16px;
        Rand: 1px durchgezogen #ddd;
        Rahmenradius: 4px;
        Benutzerauswahl: keine;
        Cursor: Zeiger;
        &:schweben {
          Farbe: #01bc77;
          Hintergrund: rgba(1, 188, 119, 0,1);
        }
      }
    }
  }
  .MeinShuttleLeft {
    Breite: 362px;
    Höhe: 100%;
    Hintergrund: #ffffff;
    Rahmenradius: 4px;
  }
  .MyShuttleCenter {
    Breite: 64px;
    Höhe: 100%;
  }
  .MeinShuttleRechts {
    Breite: 362px;
    Höhe: 100%;
    Hintergrund: #ffffff;
    Rahmenradius: 4px;
  }
}
</Stil>