So erstellen Sie ein Drag & Drop-Plugin mit benutzerdefinierten Vue-Direktiven

Wir alle kennen die Drag-and-Drop-Funktion von HTML5, mit der sich Drag-and-Drop-Funktionen ganz einfach implementieren lassen. In einigen Szenarien mit Auswahlvorgängen ist es für Benutzer beispielsweise einfacher, Ziehen zu akzeptieren und zu verstehen als Klicken mit der Maus. Heute werden wir diese Funktion verwenden und sie mit den benutzerdefinierten Anweisungen von Vue kombinieren, um ein einfaches, aber praktisches Drag & Drop-Plug-In zu implementieren.

Warum wird es Plugin genannt? Denn unser Ziel ist nicht die Entwicklung einer Vue-Komponente, sondern von zwei benutzerdefinierten Vue-Anweisungen. Diese beiden benutzerdefinierten Anweisungen werden schließlich in eine ES6-Klasse gekapselt, die bei der Einführung in tatsächliche Projekte problemlos verwendet werden kann.

In den meisten Drag-and-Drop-Szenarien werden ausgewählte Elemente per Drag & Drop von Bereich A nach Bereich B verschoben. Hier sind zwei Konzepte beteiligt: ​​das eine ist ziehbar und das andere ist platzierbar. Das ausgewählte Element muss ziehbar und der Zielbereich (Container) muss platzierbar sein.

Wenn wir eine ziehbare Vue-Komponente oder eine ablegbare Komponente entwickeln, kann nur diese Komponente gezogen und abgelegt werden. Wenn sich zu diesem Zeitpunkt die Anforderungen ändern und eine andere Komponente Drag & Drop unterstützen muss, müssen wir dennoch Drag & Drop-Code für die andere Komponente schreiben. Oder vielleicht benötigen auch andere Projekte eine Drag-and-Drop-Funktionalität und wir müssen diese neu entwickeln. Dies ist für die Wartung und Wiederverwendung nicht förderlich, und die benutzerdefinierten Anweisungen von Vue helfen uns sehr gut, dieses Problem zu lösen. Wir müssen der Komponente (einschließlich gewöhnlicher DOM-Elemente) nur benutzerdefinierte Anweisungen hinzufügen, um diese Komponente (Element) per Drag & Drop verschiebbar zu machen, damit wir sie flexibel verwenden können.

Zusätzlich zu den standardmäßig integrierten Anweisungen für die Kernfunktionalität (v-model und v-show) können Sie in Vue auch benutzerdefinierte Anweisungen registrieren. Beachten Sie, dass in Vue 2.0 Komponenten die Hauptform der Code-Wiederverwendung und -Abstraktion sind. In einigen Fällen müssen Sie jedoch immer noch Low-Level-Operationen an gewöhnlichen DOM-Elementen durchführen. In diesem Fall werden benutzerdefinierte Anweisungen verwendet.

Zusammenfassend besteht das Ziel dieses Artikels darin, zwei benutzerdefinierte Anweisungen zu vervollständigen:

• v-drag macht die Komponente ziehbar
• v-drop macht die Komponente dropbar
  

Das Ziel ist klar, also lasst uns anfangen! Da diese beiden Anweisungen für jede Komponente funktionieren sollen, müssen wir die globale Vue-Direktive registrieren.

Vue.Direktive('ziehen', {
   binden(el, Bindung, vnode){
        //Wird nur einmal aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird.
        //Hier können Sie ein einmaliges Initialisierungs-Setup durchführen.
    }
})
Vue.direktive('fallen lassen', {
   binden(el, Bindung, vnode){
        //
    }
})

Wenn Ihr Projekt mit vue-cli erstellt wird, können Sie diesen Code über der Vue-Initialisierung in main.js schreiben.

Wir schreiben den Code zunächst in den Bind-Hook der Drag-Direktive. Bind wird nur einmal aufgerufen, und zwar, wenn die Direktive zum ersten Mal an ein Element gebunden wird. Daher verwenden wir den Bind-Hook. Das Ziel dieser Direktive ist es, die Komponente (das Element) ziehbar zu machen, also setzen wir el's draggable auf true

el.draggable = wahr;
el.ondragstart = (Ereignis)=>{
  event.dataTransfer.setData("Text", "Ihre Daten...");
}

Wenn ein Element gezogen wird, wird zuerst das Ereignis ondragstart ausgelöst. Normalerweise legen wir in diesem Ereignis die gezogenen Daten für den dataTransfer des Ereignisses fest. Der Zweck besteht darin, dass der Zielcontainer die gezogenen Daten abrufen kann, wenn das Element abgelegt wird. Wenn Drag & Drop keine Daten übertragen kann, ist es sinnlos. Der obige Code ruft die setData-Methode von dataTransfer auf, um die Drag-Daten festzulegen. Parameter 1 von setData gibt den Datentyp an und Parameter 2 die zu übertragenden Daten.

Leider unterstützt Drag-Daten derzeit nur Zeichenfolgen. Wenn Sie komplexe Objekte übergeben möchten, können Sie die Daten serialisieren

Als nächstes schreiben wir Code für den Bind-Hook der Drop-Direktive. Der Zweck dieser Direktive besteht darin, die Komponente (das Element) droppbar zu machen, also müssen wir Handler für das Ondragover (Dragover-Ereignis) und Ondrop (Drop-Ereignis) des Elements schreiben. Diese beiden Handler sollten das Standardverhalten des Ereignisses verhindern.

el.ondragover = (Ereignis)=>{
  event.preventDefault(); //Standardverhalten verhindern}
el.ondrop = (Ereignis)=>{
  event.preventDefault();
  let dragData = event.dataTransfer.getData('Text'); //Drag-Daten abrufen}

Wir können den Drag-Datensatz im Drag-Start-Ereignis über die getData-Methode von event.dataTransfer abrufen.

Nun können Sie diese beiden Anweisungen zu jeder Komponente hinzufügen. Komponenten mit V-Drag können gezogen werden, und Komponenten mit V-Drop können platziert werden und Drag-Daten empfangen.

<MeineKomponente v-drag></MeineKomponente>

<MeinContainer v-drop></MeinContainer>

Ein neues Problem tritt auf. Wir führen den Drag-Vorgang aus, um Daten zu übertragen. Die Anfangsphase der Datenübertragung wird jedoch im Bind-Hook des benutzerdefinierten Drag-Befehls ausgeführt, und die Empfangsphase der Datenübertragung wird im Bind-Hook von Drop ausgeführt. Woher kommen also die Daten? Wo gehst du hin? Natürlich sollten die Daten von einer Komponente stammen und auch an eine andere Komponente übergeben werden, sonst hätte es für uns keinen Sinn, Anweisungen für Vue-Komponenten zu schreiben.

Glücklicherweise bietet uns die Hook-Funktion der benutzerdefinierten Anweisung die einfachste und effektivste Möglichkeit, auf die Komponente zuzugreifen: Dies ist der dritte Parameter vnode der Hook-Funktion. vnode hat ein Attribut namens componentInstance. Diese componentInstance ist der Host der benutzerdefinierten Anweisung: die Vue-Komponenteninstanz!

Der nächste Schritt ist einfach. Wir müssen nur eine Schnittstelle zum Abrufen von Drag-Daten für die Komponente mit hinzugefügtem V-Drag definieren und eine Schnittstelle zum Empfangen von Drag-Daten für die Komponente mit hinzugefügtem V-Drop definieren. Obwohl die Vue-Komponente die Definition der Schnittstelle nicht unterstützt, können wir uns auf die beiden Methodennamen einigen und sie in der Methode der Komponente implementieren.

//Interne Methoden der benutzerdefinierten Komponente:{
  getDragData(){ //getDragData wird als Schnittstellenmethode zum Abrufen von Komponenten-Drag-Daten vereinbart return this.id; // Gehen Sie davon aus, dass beim Ziehen dieser Komponente die ID übergeben werden muss}
  setDragData(data){ //setDragData wird als Schnittstellenmethode für Komponenten zum Empfangen von Drag-Daten vereinbart this.appendNewChildById(data); //Angenommen, diese Komponente empfängt eine ID zum Generieren neuer Elemente}
}

Schreiben Sie dann unsere benutzerdefinierte Anweisung neu, um den Drag-Data-Code festzulegen und zu übergeben:

lassen Sie dragValue = "";
wenn(vnode.componentInstance.getDragData != undefiniert){
  dragValue = vnode.componentInstance.getDragData();
}
event.dataTransfer.setData("Text", dragValue);

Ondrop-Ereignis in der V-Drop-Direktive

let dragValue = event.dataTransfer.getData('Text');
wenn(vnode.componentInstance.setDragData != undefiniert){
  vnode.componentInstance.setDragData(dragValue);
}

Wir haben beim Zugriff auf die Schnittstellenmethode der Komponente eine if-Prüfung hinzugefügt, da die Komponente diese Methoden ohne die Schnittstelleneinschränkung möglicherweise nicht implementieren würde.

Nun, hier haben wir die benutzerdefinierten Anweisungen zum Ziehen und Ablegen von Komponenten vollständig implementiert. Obwohl es einfach ist, ist es sehr praktisch und flexibel und kann grundsätzlich die Anforderungen des täglichen Ziehens und Ablegens erfüllen. Lassen Sie uns den gesamten Prozess zusammenfassen!

• Globale Anweisungen per V-Drag und V-Drop anpassen
• Die gezogene Komponente muss die Schnittstellenmethode zum Abrufen von Daten implementieren
• Die zu platzierende Komponente implementiert die Schnittstellenmethode zum Empfangen von Daten
• Der Drag-Befehl greift auf die Schnittstellenmethode der Komponente zu, um Daten abzurufen
• Der Drop-Befehl greift auf die Schnittstellenmethode der Komponente zu, um Daten zu übergeben
  

Wir kapseln den relevanten Code der globalen benutzerdefinierten Direktive in eine es6-Klasse und fügen ihn als separate JS-Datei in das Projekt ein oder veröffentlichen ihn in npm. Dann importieren wir diese Klasse in main.js und rufen die statische Initialisierungsmethode auf, um die Registrierung der globalen Direktive abzuschließen. Auf diese Weise kann jede Komponente im Projekt V-Drag und V-Drop verwenden. Von den fünf oben zusammengefassten Schritten müssen Sie nur den zweiten und dritten Schritt implementieren.

Oben finden Sie Einzelheiten zur Verwendung von benutzerdefinierten Vue-Anweisungen zum Erstellen eines Drag & Drop-Plug-Ins. Weitere Informationen zu benutzerdefinierten Vue-Anweisungen zum Erstellen eines Drag & Drop-Plug-Ins finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!