Als ich zum ersten Mal zu DRAG und DROP kam, stieß ich auf eine sehr schwierige Beschreibung (Dies ist meine subjektive Meinung. Ich bitte Sie, ihm nicht zuzustimmen, sondern alles Mögliche noch einmal zu lesen und diese Frage aus verschiedenen Blickwinkeln zu betrachten). Und ich habe beschlossen, ein paar Artikel zu schreiben, die sich an Anfänger richten, die Zen lernen möchten.
Der Artikel besteht aus zwei Teilen:
- Methode zum Erstellen von DRAG- und DROP-Effekten.
- Praktische Anwendung der gewonnenen Erkenntnisse zur Sortierung mit DRAG und DROP
Absatz Nr. 1 Methode zur Erzeugung des DRAG- und DROP-Effekts
Bevor wir mit einer eingehenden Analyse beginnen, schauen wir oberflächlich. Stellen Sie sich als Lader vor, Sie müssen die Box von einem Ort zum anderen bewegen. Für den Lader: „Nun, ich habe es genommen, nun, ich habe es übertragen. Fertig! “Und für den Programmierer:„ Ich ging zur Kiste, bückte mich, nahm die Kiste, hob die Kiste auf, ging N Stufen, bückte mich, ließ die Kiste los. “ Ich meine, bevor Sie mit der Arbeit beginnen, verlieren Sie alles in Ihrem Kopf, in Schritten und Sie werden der Wahrheit viel näher kommen.
Ich möchte reservieren, dass es verschiedene Methoden gibt, um diesen Effekt zu erzielen, und über alles lesen. Ich werde diejenige nutzen, die ich derzeit für die bequemste halte.
Beim Erstellen von DRAG und DROP müssen Sie zunächst das Objekt, das verschoben werden soll, auf draggable = 'true' setzen.
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> </body> </html>
,
In der ersten Phase möchte ich den Prozess selbst zeigen, und danach werden wir ihn auf alle Objekte verteilen. Wir arbeiten derzeit in JS, und wie Sie wissen, gibt es im Browser verschiedene Ereignisse, an die wir unsere eigenen Aktionssequenzen anhängen können. Schauen wir uns die notwendigen Ereignisse zum Erstellen von DRAG und DROP an:
Dragstart - tritt auf, wenn der Benutzer mit dem Ziehen eines Elements beginnt.
Ziehen - tritt auf, wenn ein Element gezogen wird.
dragend - tritt auf, wenn der Benutzer das Ziehen des Elements abgeschlossen hat.
Dragenter - tritt auf, wenn das gezogene Objekt das Ziel trifft.
Dragleave - tritt auf, wenn das gezogene Objekt das Ziel verlässt.
Dragover - tritt auf, wenn sich das gezogene Objekt über dem Ziel befindet.
drop - tritt auf, wenn das zu ziehende Objekt auf das Ziel fällt.
Nun sehr wichtige Informationen! Ereignisse sind in zwei Gruppen unterteilt. Für das verschobene Element (das wir ziehen): Dragstart, Drag, Dragend. Für das empfangende Element (wo wir es ziehen): Dragenter, Dragleave, Dragover, Drop. Und diese Ereignisse können nicht umgekehrt funktionieren, aber sie können ohne einander funktionieren.
Beispiel: Sie müssen das Objekt verschieben und dort belassen, wo wir die Maustaste losgelassen haben. Für diese Aufgabe ist kein Hostteil erforderlich.
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> <div id='d2' class='ddd'>Vtoroy 2</div> <div id='d3' class='ddd'>Tretii 3</div> <div id='d4' class='ddd'>Chetverty 4</div> <div id='d5' class='ddd'>Pyatii 5</div> <script> var d1 = document.getElementById('d1'); var startCursorX; var startCursorY; var startX; var startY; d1.addEventListener('dragstart',function() { startCursorX = event.pageX;</script> </body> </html>
Zweifellos wird das Beispiel am Knie gemacht, aber es zeigt perfekt die Optionalität des empfangenden Objekts.
Ich betrachte Beispiele mit separaten Ereignissen als nichts, denn wenn Sie in der Zeile
d1.addEventListener ('dragstart', function () { 'dragstart' durch ein anderes Ereignis ersetzen, können Sie damit spielen und interessante Ergebnisse erzielen. , spielen und zeigen Sie, was Ihnen in den Kommentaren ungewöhnlich und interessant erschien, damit jeder viel lernen und es selbst wiederholen kann.
Absatz Nr. 2. DROP funktioniert nicht in DRAG und DROP
Wenn Sie alle Ereignisse ausprobieren, werden Sie feststellen, dass das Löschen nicht funktioniert. Es sind die Entwickler dieser Methode, die denjenigen den Atat geben, die entschieden haben: "Und das ist es ... Huh, Unsinn."
Nun, alles ist einfach. Vor dem Drop-Ereignis müssen Sie ein Ereignis an dasselbe Element hängen
d2.addEventListener('dragover',function() { event.preventDefault(); });
Nehmen Sie das als Tatsache, es wird ohne es nicht funktionieren.