HTML5 Drag & Drop -API, um Beispielcode für Drag & Drop -Sortierung zu implementieren

HTML5 liefert eine direkte Luftwaffe -und -drop -API, die für uns sehr bequem ist, um den Drag & Drop -Effekt zu erzielen. Um verschiedene Drag & Drop -Funktionen zu erzielen.

Wenn Sie ein bestimmtes Element ziehen und fallen lassen möchten, müssen Sie die draggierbare Eigenschaft des Elements auf True einstellen. Die IMG -Elemente und ein Elemente werden mit draggabbaren Attributen auf True festgelegt, die direkt gezogen und fallen gelassen werden können.

Drag & Drop -Vorfälle werden durch verschiedene Elemente erzeugt. Ein Element wird gezogen und fallen gelassen, und er kann schließlich das Element erreichen, das er auf vielen Elementen legen möchte. Hier beziehe ich mich vorübergehend auf das Element des Ziehens und des Drops und das Element des Prozesses, und das Element, das ich erreicht habe, wird als Zielobjekt bezeichnet. Unterschiedliche Objekte haben unterschiedliche Drag & Drop -Ereignisse.

Quellobjekt:

1. Dragstart: Das Quellobjekt beginnt zu ziehen und zu fallen.
2. Ziehen: Während des Drag -and -Tropfens des Quellobjekts.
3. Dragend: Das Quellobjekt Drag & Drops.

Prozessobjekt:

1. Dragenter: Quellobjekte beginnen, den Bereich des Prozesses einzugeben.
2. Dragover: Das Quellobjekt bewegt sich im Bereich des Prozesses.
3. Dragleave: Der Umfang des Objekts der Quelle verlässt den Prozess.

Zielobjekt:

1. Drop: Das Quellobjekt wird gezogen und in das Zielobjekt fallen gelassen.

 <div id = source draggable = true> a Element </div> <div id = prozess> belement </div> <div id = target> c Element </div> <script> var source = document.getElementById '(( 'Source'), // ein Element proces = document.getElementById ('prozess'), // belement target = document.gelementById ('target'); Dragstart -Ereignisse werden vom A -Element generiert, um Konsole zu generieren. Element. . );} </script>

Ein Datenübertragungsobjekt -DataTransfer wird in allen Drag -und -drop -Ereignissen bereitgestellt, um Daten zwischen Quellobjekten und Zielobjekten zu übergeben. Lernen Sie als nächstes die Methoden und Attribute dieses Objekts kennen, um zu verstehen, wie es Daten überträgt.

Diese Methode wird im DataTransfer -Objekt gespeichert. Empfangen Sie zwei Parameter, die erste gibt eine Zeichenfolge an, um die Art der Daten zu speichern, und unterstützt nun Folgendes:

1. Text/Ebene: Text Text.
2. Text/HTML: HTML -Text.
3. Text/XML: XML Text.
4. Text/URI-Liste: URL-Liste, jede URL ist eine Zeile.

Der zweite Parameter sind die zu gespeicherten Daten. Zum Beispiel:

 event.datatransfer.setData ('text/plain', 'Hallo Welt');

Diese Methode liest Daten aus dem DataTransfer -Objekt. Der Parameter ist der in SetData angegebene Datenart. Zum Beispiel:

 event.datatransfer.getData ('text/plain');

Diese Methode beseitigt die im DataTransfer -Objekt gespeicherten Daten. Parameter sind für Datentypen optional. Wenn die Parameter leer sind, löschen Sie alle Arten von Daten. Zum Beispiel:

 event.datatransfer.cleardata ();

Diese Methode wird mithilfe von IMG -Elementen auf Drag & Drop -Symbole eingestellt. Empfangen Sie die drei Parameter, das erste ist das Symbolelement, das zweite ist die X -Achse -Verschiebung des Symbolelements aus dem Mauszeiger, und die dritte ist die y -Achse -Verschiebung des Symbolelements aus dem Mauszeiger. Zum Beispiel:

 Var Source = document.getElementById ('Source'), icon = document.createelement ('img'); 10, -10)}, falsch)

Diese beiden Attribute werden kombiniert, um den visuellen Effekt von Drag & Drop festzulegen.

Es ist erwähnenswert, dass der IE das DataTransfer -Objekt nicht unterstützt. Ja, egal welche IE -Version unterstützt wird.

Die Verwendung von Drag & Drop -APIs ist bereits mit dem oben genannten vertraut. Schauen wir uns zuerst die Idee an:

1. In einer Liste kann jedes Element gezogen und fallen gelassen werden, und die draggierbare Eigenschaft ist für jedes Element auf TRUE eingestellt.
2. Beachten Sie das Dragstart -Ereignis jedes Elements, um den Stil des Quellobjekts zu unterscheiden.
3. Bei der Überwachung des Dragenter -Ereignisses jedes Elements wird das Quellobjekt vor dem Element hinzugefügt, wenn das Quellobjekt in das aktuelle Element eingeht. Auf diese Weise werden die Elemente dahinter durch das Quellobjekt niedergeschlagen, wodurch der Sortierungseffekt erzielt wird.
4. Es wird jedoch festgestellt, dass das Quellobjekt nicht auf das letzte eingestuft werden kann und nur der zweite im vorletzten. Zu diesem Zeitpunkt wird das Dragleave -Ereignis überwacht.

Der Hauptcode lautet wie folgt:

 var Source = document.querySelectiverall ('. List'), Dragelement = null; ) {Dragelement = this;}, false); [i] .AdDeVentListener ('Dragleave', Funktion (ev) {if (dragelement! );}}, false)};

Vollständige Codeadresse: Drag-Demo

Es ist hauptsächlich in IE kompatibel, aber zumindest kann es zumindest in IE10 gezogen und sortiert werden.

Und in meinem einfachen Test wird festgestellt, dass das Dragleave -Ereignis nicht ausgelöst wird, wenn die Elemente nicht in IE eingestellt sind.

Der wichtigere Punkt liegt auf iOS und Android, was völlig inkompatibel ist. Glücklicherweise gibt es einen Stecker, der es am mobilen Ende perfekt kompatibel macht.

Plug-in-Adresse: iOS-HTML5-Drag-Drop-Shim

Sie müssen nur den Stecker im Originalcode einführen, um ihn auf das mobile Terminal zu ziehen.

 <Script> var iOSDRagdropshim = {EnsablenerLave: true} </script> <script src = vendor/ios-drop.js> </script>

Das oben genannte ist der Inhalt dieses Artikels.