Drag & Drop ist ein häufiges Merkmal, dh ziehen nach dem Erfassungsobjekt zu einer anderen Position.
In HTML5 ist Drag & Drop ein Standardteil, und jedes Element kann gezogen und fallen gelassen werden.
Internet Explorer 9+, Firefox-, Opera-, Chrome- und Safari -Unterstützung.
Hinweis: Safari 5.1.2 unterstützt keinen Drag.Beispiel:
<! style> <script> Funktion Alowdrop (ev) {ev.preventDefault ();} Funktion Drag (ev) {ev.datatransfer.setData (text, evraget.id);} Funktion op (ev) {ev. var data = ev.datatransfer.getData (Text); = Drag1 src = img /bg_1.jpg driaggable = true ontagstart = Drag (Ereignis) width = 300px heig ht = 180px /> < /body> < /html>Um das Element gezogen zu werden, stellen Sie zunächst die draggierbare Eigenschaft auf true: <img draggable = 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.
Dadurch werden die Ereignis aufgerufen .
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 ();Code Erläuterung:
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)
Hin und her ziehen:Wenn Sie an zwei Stellen hin und her ziehen möchten, ändern Sie einfach den obigen Code.
Ändern Sie den Code im Körper:
<body> <div id = div1 Ondrop = Drop (Ereignis) ONDRAGOVER = ERGENTEDROP (Ereignis)> <img id = drag1 src = img/bg_1.jpg draggable = true vent) width = 300px hohe = 180px/> </div> <div ID = div2 oneDrop = Drop (Ereignis) ONDRAGOVER = ERGENTEDROP (Ereignis)> </div> </body>
Fügen Sie dann#Div2 zum Stilstil hinzu:
<Style type = text/css> #div1, #div2 {width: 360px;Dies kann hin und her gezogen werden.
Das oben genannte ist der Inhalt dieses Artikels.