Ausführliche Erläuterung des nativen Drag-and-Drop-Vorgangs von HTML5

Die Drag-and-Drop-Funktion von H5 wurde in einer aktuellen Projektentwicklung verwendet. Da das bestehende Projekt den VUE-Familien-Bucket verwendet, wird das vuedragable Plug-in verwendet, aber der gesamte Prozess ist ziemlich mühsam. Deshalb beschloss ich, zunächst die Prinzipien des H5-Drag-and-Drop zu studieren und sie dann auf das datengesteuerte Framework anzuwenden. Um Drag-and-Drop-Vorgänge in H5 zu implementieren, sind mindestens zwei Schritte erforderlich: 1) Setzen Sie das Drag-and-Drop-Attribut des Objektelements, das Sie per Drag-and-Drop verschieben möchten, auf true (img- und a-Elemente erlauben standardmäßig Drag-and-Drop). 2) Schreiben und Ziehen des relevanten Ereignisbehandlungscodes. Um das Testen zu vereinfachen, verwende ich zunächst die jQuery-Bibliothek, um die grundlegende Drag-and-Drop-Funktion abzuschließen.

Wenn Sie das ziehbare Element ziehen, während Sie die Maus gedrückt halten, wird es in der folgenden Reihenfolge ausgelöst:

Dragstart -> Drag -> Dragend

1. Dragstart: Wird ausgelöst, wenn die Maus gedrückt und mit dem Ziehen begonnen wird (einmal ausgelöst)
2. Ziehen: Wird ausgelöst, während Sie die Maus gedrückt halten und ziehen (kontinuierlich ausgelöst)
3. Dragend: Wird nach dem Loslassen der Maus ausgelöst (unabhängig davon, ob das Element auf einem gültigen Platzierungsziel oder einem ungültigen Platzierungsziel platziert ist).

Wenn das ziehbare Element in den Container gezogen wird, wird es in der folgenden Reihenfolge ausgelöst:

Dragenter -> Dragover -> Drop

Dragenter: Solange ein Element zum Drop-Ziel gezogen wird, wird das Dragenter-Ereignis ausgelöst.

Dragover: Auf Dragenter folgt das Dragover-Ereignis, und dieses Ereignis wird weiterhin ausgelöst, während sich das gezogene Element noch innerhalb des Bereichs des Ablageziels bewegt.

Dragleave: Wenn das Element aus dem Platzierungsziel gezogen wird, wird Dragleave ausgelöst.

Drop: Wird ausgelöst, wenn das gezogene Element auf dem Zielelement platziert wird

Vom Beginn des Ziehens des Elements bis zum Platzieren des Elements im Zielbereich wird es in der folgenden Reihenfolge ausgelöst:

Dragstart->Drag->Dragenter->Dragover->Dragleave->Drop->Dragend

Wenn wir das Draggable-Attribut direkt zu einem Element hinzufügen, kann es direkt in Chrome und Opera gezogen werden (es gibt keinen Freigabevorgang (z. B. wenn sich der Pfeil in ein +-Zeichen ändert)), aber in Firefox erfolgt keine Reaktion.

 <ul class=canDrog> <li draggable=true id=1>Ausgezeichnet</li> <li draggable=true id=2>Gut</li> <li draggable=true id=3>Mittel</li> <li draggable=true id=4>Schlecht</li> </ul> <script> //Kein JS-Code</script>

Um dieses Problem zu lösen, müssen Sie den Dragstart-Ereignishandler an das Drag-Element binden und in dieser Funktion die Funktion event.dataTransfer.setData aufrufen.

 <script> <ul class=canDrog> <li draggable=true id=1>Ausgezeichnet</li> <li draggable=true id=2>Gut</li> <li draggable=true id=3>Mittel</li > <li draggable=true id=4>Unterschied</li> </ul> $('.canDrog > li').bind('dragstart',function(event){ //firefox Muss auf das dataTransfer-Objekt zugreifen, das für die Drag-and-Drop-Kommunikation verwendet wird: event.dataTransfer.setData(Text,'1');</script>

Das lösbare Logo kann je nach Betriebssystem unterschiedlich sein. In Mac Chrome erscheint es als kreisförmiges Logo mit einem eingebetteten weißen „+“.

Die Lösung besteht darin, das Dragover-Ereignis an den Container zu binden

 <ul class=canDrog> <li draggable=true id=1>Ausgezeichnet</li> <li draggable=true id=2>Gut</li> <li draggable=true id=3>Mittel</li> <li draggable=true id=4>Differenz</li> </ul> <table class=dataTbl> <thead> <tr> <th style=width: 10%>Abschnitt/Woche</th> <th>Montag</th> <th>Dienstag</th> <th>Mittwoch</th> <th>Donnerstag</th> <th>Freitag</th> </tr> </thead> <tbody > <tr> <td>Abschnitt 1</td> <td Draggable=true ></td> <td Draggable=True ></td> <td Draggable=True ></td> <td Draggable= True >< /td> <td draggable=true ></td> </tr> <!--Hier weggelassen--> </tbody> </table><script> $('.canDrog > li').bind('dragstart',function ( event){ //firefox muss auf das dataTransfer-Objekt zugreifen, das für die Drag-and-Drop-Kommunikation verwendet wird event.dataTransfer.setData(Text,'1' }); Chrome und Opera müssen $(.dataTbl).bind(dragover,'td',function(e){ e.originalEvent.preventDefault(); }) </script> hinzufügen

Wenn Sie das gezogene Element bei Verwendung von Firefox loslassen, öffnet der Standardbrowser wie folgt einen neuen Tab

Dies liegt daran, dass der Browser nach der Drop-Callback-Funktion das Standardverhalten ausführt. Die übliche Lösung besteht darin, Code hinzuzufügen, der die Ausführung des Standardereignisses verhindert und das Sprudeln im Drop-Hook des Drag-Containers verhindert.

 <script> //Das Element im aktuellen Element freigeben $('.dataTbl').bind('drop','td',function(event){ console.log('+++drop'); event.preventDefault (); event.stopPropagation( });</script>

Wenn jedoch ziehbare Elemente an andere Orte gezogen werden, tritt weiterhin das Problem des Öffnens neuer Registerkarten auf. In diesem Fall kann der obige Code zu allen Containern hinzugefügt werden.

Quellcode: https://github.com/pluslicy/drag

Später werden wir die Vuedraggable-Plug-In-Bibliothek studieren und sie im Vue-Framework anwenden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.