So verwenden Sie vue.js zum Implementieren der Drag & Drop-Funktion

Vorwort

Durch das Hinzufügen einer Drag & Drop-Funktion können Sie Ihr Programm natürlicher und benutzerfreundlicher gestalten. Obwohl es Bibliotheken mit Drag-and-Drop-Funktionalität gibt, ist es hilfreich zu verstehen, wie sie im Hintergrund funktionieren.

In diesem Artikel verwenden wir die integrierte HTML-Drag & Drop-API, um ein einfaches Drag & Drop-System zu implementieren. So was:

Drag & Drop-API

Die HTML-Drag & Drop-API ist eine integrierte Methode, die mehrere Ereignisse und Attribute enthält. Zusammengefasst lässt sich bei der Handhabung jedoch sagen, dass zwei Arten von Elementen im Vordergrund stehen.

1. Ziehbare Elemente: Elemente, die gezogen werden können
2. Ablegbare Elemente: Elemente, die gezogene Elemente empfangen können
   

Auf diese Weise lassen sich Drag & Drop-Ereignisse einfacher analysieren.

Drag & Drop-Ereignisse

Es gibt acht Drag & Drop-Ereignisse in der API, die in unserem Programm verwendet werden können.

• ziehen: Das verschiebbare Element wird gezogen
• dragstart: Beginnen Sie mit dem Ziehen des verschiebbaren Elements
• dragend: Ziehen wird beendet (z. B. Maus loslassen)
• dragenter : Das gezogene Element gelangt in das abwerfbare Element
• dragleave – das verschiebbare Element verlässt das ablegbare Element
• dragover: Das ziehbare Element bewegt sich über das ablegbare Element (wird etwa alle 100 Millisekunden aufgerufen)
• drop: Das ziehbare Objekt wird auf dem ablegbaren Element abgelegt.
  

dataTransfer-Objekt

Eines der wichtigsten Dinge, die Sie über die Drag & Drop-API wissen müssen, ist, dass sie dem Ereignis ein dataTransfer-Objekt hinzufügt.

Mit dem dataTransfer-Objekt können wir Daten festlegen, wenn wir mit dem Ziehen eines Elements beginnen, und auf dieselben Daten zugreifen, wenn wir das Element in der Ablagezone ablegen.

Es gibt einige Eigenschaften und Methoden, die wir über dataTransfer kennen sollten (sehen Sie sich die dataTransfer-API-Dokumentation an, wenn Sie mehr erfahren möchten).

• dropEffect: Die aktuelle Drag-and-Drop-Operation (z. B. Verschieben, Kopieren)
• effectAllowed: Gibt die Drag & Drop-Operation an
• setData(name, val): ermöglicht uns, Werte zum dataTransfer-Objekt hinzuzufügen
• getData(name): Ruft den gespeicherten Wert ab
  

Erstellen Sie Ihr eigenes Drag & Drop-System

Wie Sie sehen, gibt es in diesem Beispiel zwei Listen und wir können Elemente problemlos per Drag & Drop zwischen ihnen ziehen.

Konfigurieren unseres Projekts

Zuerst müssen wir die Daten einrichten. Erstellen Sie im Skript ein Array von Elementobjekten mit den folgenden Eigenschaften:

• id: Eine eindeutige ID, damit wir das Objekt nachschlagen können
• Titel: der anzuzeigende Text
• Liste: Die Liste, zu der es gehört.

Ich habe beschlossen, diesem Array drei Elemente hinzuzufügen:

Daten () {
    zurückkehren {
      Artikel: [
      {
        ID: 0,
        Titel: 'Artikel A',
        Liste: 1
      },
      {
        ID: 1,
        Titel: 'Artikel B',
        Liste: 1
      },
      {
        ID: 2,
        Titel: 'Artikel C',
        Liste: 2
      }]
    }
}

Es werden zwei zusätzliche berechnete Eigenschaften erstellt, um die Elementliste auf nur die in Liste 1 und die in Liste 2 zu filtern.

berechnet: {
    ListeEins () {
      gib diesen.Artikel.Filter zurück (Artikel => Artikel.Liste === 1)
    },
    ListeZwei () {
      gib diesen.Artikel.Filter zurück (Artikel => Artikelliste === 2)
    }
}

Es ist besser, berechnete Eigenschaften zu erstellen, anstatt v-if innerhalb von v-for zu verwenden.

Vorlagencode erstellt

Dies ist der Umriss der Komponente. Dieser Code zeigt den gesamten Inhalt an, jedoch ohne die Drag & Drop-Funktionalität.

<Vorlage>
  <div>
    <div Klasse='Ablagezone'>
      <div v-for='Element in Liste Eins' :key='Element.Titel' class='drag-el'>
        {{ item.title }}
      </div>
    </div>
    <div Klasse='Ablagezone'>
      <div v-for='Element in Liste Zwei' :key='Element.Titel' class='drag-el'>
        {{ item.title }}
      </div>
    </div>
  </div>
</Vorlage>

Der Stil der Komponente ist nicht wichtig. Es ist wichtig, dass Ihre Dropzone eine bestimmte Höhe hat, auch ohne Elemente darin, sonst können Sie nicht mit der Maus darüber fahren!

<Stilbereich>
  .Ablagezone {
    Hintergrundfarbe: #eee;
    Rand unten: 10px;
    Polsterung: 10px;
  }

  .ziehen-el {
    Hintergrundfarbe: #fff;
    Rand unten: 10px;
    Polsterung: 5px;
  }
  
</Stil>

Dies wird erreicht, indem dem Drop-Zone-Stil etwas Polsterung hinzugefügt wird.

Hinzufügen einer Drag & Drop-Funktionalität

Fügen Sie zunächst Ihrem Skript einige Methoden hinzu: eine, die verwendet wird, wenn Sie mit dem Ziehen eines Elements beginnen, und eine, die verwendet wird, wenn Sie das Element ablegen.

Für die Methode startDrag möchten wir die zuvor besprochene Eigenschaft dataTransfer verwenden, um die ID des zu ziehenden Elements zu speichern. Darüber hinaus wird dieses Drag-Ereignis eine Aktion sein.

startDrag: (evt, item) => {
      evt.dataTransfer.dropEffect = "verschieben"
      evt.dataTransfer.effectAllowed = "Verschieben"
      evt.dataTransfer.setData('Artikel-ID', Artikel-ID)
}

Die gespeicherte ID wird dann in Ondrop abgerufen, sodass wir auf das richtige Element im Array zugreifen können.

onDrop (Ereignis, Liste) {
      const itemID = evt.dataTransfer.getData('itemID')
      const item = this.items.find(item => item.id == itemID)
      item.list = Liste
}

Fügen Sie unten den Vorlagencode hinzu.

Fügen Sie zunächst das Ereignis zur Veranstaltung hinzu. Das Element muss ziehbar gemacht werden und das Drag-Start-Ereignis muss erkannt werden.

<div 
        Klasse = "Drag-el" 
        v-for='Element in ListeZwei' 
        :Schlüssel='Artikeltitel' 
        verschiebbar
        @dragstart='startDrag($Ereignis, Element)'
 >
        {{ item.title }}
</div>

Da wir das ziehbare Attribut hinzugefügt haben, sollten Sie das Element beim Ausführen des Programms auf diese Weise ziehen können, Sie können es jedoch nirgendwo ablegen.

Geben wir ihm eine Dropzone, die das verschiebbare Element akzeptiert. Fügen Sie zunächst einen Drop-Event-Listener hinzu, der die Methode onDrop aufruft.

<div
      Klasse = "Ablagezone"
      @drop='onDrop($Ereignis, 1)' 
>

Beachten Sie jedoch, dass wir preventDefault sowohl für die Drag&Drop-Hooks „dragEnter“ als auch „dragOver“ aufrufen müssen.

Denn standardmäßig erlauben diese beiden Methoden nicht, Elemente zu löschen. Damit unser Drop-Ereignis ordnungsgemäß funktioniert, muss seine Standardaktion verhindert werden.

Dies kann mit dem in Vue integrierten Ereignismodifikator .prevent erfolgen.

<div
      Klasse = "Ablagezone"
      @drop='onDrop($Ereignis, 1)' 
      @dragover.prevent
      @dragenter.prevent
>

Führen Sie nun das Programm aus und Sie werden sehen, dass alles einwandfrei funktioniert. Wir können Elemente per Drag & Drop zwischen zwei verschiedenen Listen verschieben.

Zusammenfassen

Obwohl dieses Beispiel sehr einfach ist, vermittelt es Ihnen ein gutes Verständnis der Funktionsweise der HTML-Drag & Drop-API. Es ist eigentlich nicht so schwierig, wie Sie denken.

Dies ist das Ende dieses Artikels zur Verwendung von vue.js zur Implementierung der Drag & Drop-Funktion. Weitere relevante Inhalte zur Drag & Drop-Funktion von vue.js finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!