Detaillierte Erläuterung des Drag & Drop -Ereignisses in HTML5 (Drag & Drop)

Internet Explorer 9, Firefox, Opera 12, Chrome und Safari 5 Support Drag and Drop.

 <! JavaScript> Funktion erlaubt (ev) {ev.preventDefault ();} Funktion Drag (ev) {ev.datatransfer.setData (Text, ev.target.id); Ev.datatransfer.getData (Text); punkt (Ereignis)/> </body> </html>

Um das Element gezogen zu werden, stellen Sie zunächst die draggierbare Eigenschaft auf true:

Es wird dann angegeben, was passiert, wenn das Element gezogen wird.

Im obigen Beispiel ruft die Ondragstart -Eigenschaft eine Funktion, Drag (Ereignis), die die gezogenen Daten angibt.

DataTransfer.setData () -Methode legen Sie den Datentyp und den Wert der Datenschleppdaten fest:

 Funktion Drag (ev) {ev.datatransfer.setData (text, ev.target.id);}

In diesem Beispiel ist der Datentyp Text und der Wert ist ID (Drag1), der das Element ziehen kann.

Das ONDRAGOVER -Ereignis sieht vor, wo die gezogenen Daten platziert werden sollen.

Standard, Daten/Elemente können nicht in andere Elemente platziert werden. Wenn Sie die zulässige Platzierung festlegen müssen, müssen wir die Standardverarbeitung von Elementen verhindern.

Dies soll das Ereignis aufrufen.

 Event.PreventDefault ()

Wenn die Ziehendaten platziert werden, erfolgt das Drop -Ereignis.

Im obigen Beispiel ruft das ONDROP -Attribut eine Funktion auf, Drop (Ereignis):

 Funktion Drop (ev) {ev.preventDefault ();

Rufen Sie die Verhinderungdefault () an, um die Standardverarbeitung der Daten durch den Browser zu vermeiden (das Standardverhalten des Drop -Ereignisses wird in einer Link geöffnet)

Holen Sie sich die gezogenen Daten über die Methode DataTransfer.getData (Text). Diese Methode kehrt zu Daten desselben Typs in der Methode setData () zurück.

Ziehendaten sind die ID des Ziebelements (Drag1)

Zusätzliches Ziehenelement zum Platzierungselement (Zielelement)

Das oben genannte Inhalt dieses Artikels.