Drag -and -Drop sind ein häufiges Merkmal, dh ziehen nach dem Erfassungsobjekt in eine andere Position. In HTML5 können Benutzer eine Maus verwenden, um ein Schleppelement auszuwählen, das Element in ein platzierbares Element zu ziehen und die Maustaste an diese Elemente zu setzen. Während des Widerstandsvorgangs kann der Halbtransparent, der den Mauszeiger angibt, gezogen werden.
Wenn wir hoffen, dass das Element gezogen werden kann, müssen wir seine draggierbare Eigenschaft auf true einstellen (ein Tag -Draggable -Standard ist wahr))
Drag & Drop -EventIn verschiedenen Phasen des Drag -and -Drop -Betriebs werden mehrere Ereignisse ausgelöst, und das Datatransfer -Attribut des Drag -and -Draging -Vorfalls muss die relevanten Daten im Drag & Drop -Betrieb speichern.
| Dragstart | Aktiv für [Quellelement], wenn ein Element gezogen wird, benötigt das Benutzer -Ziehenelement ein zusätzliches Dragstart -Ereignis. Bei diesem Vorfall richtet der Hörer Informationen zu diesem Drag ein, z. B. Daten und Bilder. |
| Dragenter | Aktiv für [Quellelement], löst, wenn die Maus im Ziehen in ein Element eingeht. Der Zuhörer dieses Vorfalls muss angeben, ob die Maus in diesem Bereich freigelassen werden darf. Wenn der Hörer nicht festgelegt ist oder der Hörer nicht betrieben wird, darf er standardmäßig nicht freigegeben werden. |
| Dragover | Aktiv in [Zielelement], löst sich aus, wenn sich die Maus mit einem Widerstand bewegt. |
| Dragleave | Aktiv in [Zielelement], löst aus, wenn die Maus das Element im Ziehen verlässt. Es kann als Highlight oder Einfügung verwendet werden, die freigegeben werden können. |
| Ziehen | Das Ereignis ist für [Quellelement] aktiv und wird ausgelöst, wenn das Element gezogen wird. |
| fallen | Aktiviert für [Zielelement] das Release -Element, wenn die Freigabe der Freigabe des Drag -Operation. |
| schleppend | Die für [Quellelement] aktive Drag -Quelle wird am Ende des Draging -Vorgangs ausgelöst, unabhängig davon, ob der Vorgang erfolgreich ist. |
(Beim Ziehen löst es nur die schleppenden Ereignisse, Mausereignisse wie Mousemove aus, die nicht ausgelöst werden.
DataTransfer -ObjektBei der Verarbeitung des Drag & Drop -Betriebs müssen wir das DataTransfer -Objekt verwenden, um die gezogenen Daten zu speichern. Datatransfer kann einen oder mehrere Daten, einen oder mehrere Datentypen speichern.
Eigentum
| DROPEffect | DROPEffect [String] Geben Sie den tatsächlichen Platzierungseffekt an, möglicher Wert an: Kopieren: Kopieren Sie in eine neue Position Bewegung: Wechseln Sie zu einer neuen Position Link: Erstellen Sie einen Link von einer Quelle zu einer neuen Position Keine: verboten zu platzieren (keine Operation) |
| Effekt | [String] Geben Sie den zulässigen Effekt beim Ziehen an, mögliche Werte: Kopieren: Kopieren Sie in eine neue Position. Bewegung: Bewegen Sie sich zu einer neuen Position. Link: Erstellen Sie einen Link von einer Quelle zu einem neuen Ort. COPYLINK: Kopieren oder Link zulassen. COPYMOVE: Kopie oder Bewegung zulassen. LinkMove: Links zulassen oder verschieben. ALLE: Erlauben Sie allen Vorgängen. Keine: verboten alle Operationen. Nicht initialisiert: Der Standardwert (Standardwert) entspricht allen. |
| Dateien | Enthält eine Liste lokaler Dateien, die für die Datenübertragung verfügbar sind. Wenn die Drag -Operation nicht die Drag -Datei umfasst, handelt es sich bei diesem Attribut um eine leere Liste. |
| Typen | Speichern Sie eine Liste von Speicherdaten als erstes Element. Die Reihenfolge steht im Einklang mit der Reihenfolge des Hinzufügens. Wenn keine Daten hinzugefügt werden, wird eine leere Liste zurückgegeben. |
Verfahren
| Hohlraum -Addelement (Elementelement) | Stellen Sie die Drag -Quelle ein. Normalerweise müssen Sie dies nicht ändern. Das Standardziel ist, gezogene Knoten zu werden |
| Void cleardata (String -Typ) | Daten löschen, die einem bestimmten Typ zugeordnet sind. Typparameter sind optional. Wenn der Typ leer oder nicht spezifiziert ist, löschen Sie alle Arten von zugehörigen Daten. Wenn kein bestimmter Typ von Daten oder Datenübertragung keine Daten enthält, hat diese Methode keinen Einfluss. |
| String getData (String -Typ) | Wenn die Daten des angegebenen Typs nicht vorhanden sind oder die Daten ohne Daten gespeichert werden, gibt die Methode eine leere Zeichenfolge zurück. |
| void setData (String -Typ, String -Daten) | Stellen Sie Daten für einen bestimmten Typ fest. Wenn der Datentyp nicht vorhanden ist, wird er zum Ende hinzugefügt, und das letzte Projekt in dieser Typliste wird ein neues Format sein. Wenn Sie bereits existieren, ersetzen Sie vorhandene Daten in derselben Position. Das heißt, wenn der gleiche Datenart ersetzt wird, wird die Reihenfolge der Typliste nicht geändert. |
| void setDagimage (Domelementbild, lang x, lang y) | Passen Sie ein Bild eines erwarteten Zuges an. In den meisten Fällen muss dieses Element nicht festgelegt werden, da der gezogene Knoten als Standardbild erstellt wird. Das Bild sollte als Drag -Feedback -Bildelement verwendet werden Die horizontale Verschiebung im X -Bild. Der vertikale Versatz in der Y -Statue. |
Browserunterstützung
Internet Explorer 9+, Firefox, Opera 12, Chrome und Safari 5+
Demonstrationscode
<! ; solide #CCCCFF; > </div> <div class = bin> & nbsp; '. e.Datatransfer.effectallowed = 'Move'; true; Dragelement gibt das Zielelement Bin.onDragover = Funktion (e) {E.PreentDefault (); '; Funktion (e) {if (Drag) {Drag.ParentNode.Removild (Drag); Funktion (e) {E.PreventDefault ();Die oben genannte Einführung der Drag & Drop -bezogenen Informationen in HTML5.