Drag -and -Drop sind Teil des HTML5 -Standards.
Browserunterstützung
Internet Explorer 9, Firefox, Opera 12, Chrome und Safari 5 Support Drag and Drop.
Dragelement, Dragelement:
1. Ereignis hinzufügen: ONDRAGTART 2. Attribute hinzufügen: dragbarPlatzelement, Tropfen:
1. Ereignisse hinzufügen: Ondargenter, OneDagover, Ondagleave, Ondragend, Ondrop
Es ähnelt den Vorfällen von Mouser in die Klassifizierung, und es wird nicht verstanden.
1. Ziehen Sie zwischen den Elementen auf der Seite und fallen Sie ein.
Verwenden wir ein kleines Beispiel unten, der Drag & Drop zwischen der DIV angezeigt wird, wie jedes Ereignis ausgelöst wird:
<! src = ../../jquery-1.8.3.js type = text/javascript charset = utf-8> </script> <script type = text/javaScript>/*** Drag (Drag and Drop) ist. HTML5 -Standardkomponente. * Browser unterstützt* Internet Explorer 9, Firefox, Opera 12, Chrome und Safari 5 Support Drag and Drop. * / $ (fuins () {$ (#DRAGELEE) [0] .ondragstart = function (Ereignis) {console.log (DrawStart); Event.Datatransfer.SetData (text, Event.target.id);}; /* * * Wenn die Schleppdaten platziert werden, tritt das Drop -Ereignis auf. p] + @@);} * / console.log (ONDROP); ) .d (Divy). } $ (#Dropele) [0] .ondragleave = function (Ereignis) {console.log (Ondrop -Urlaub); Head> <Body> <Div-Style = Grenze: 1px rot; : 330px;Sie müssen darauf achten::
A. Ontragover muss das Standardverhalten des Ereignisses organisieren.
B. Das Standardverhalten des Drop -Ereignisses wird in einem Link geöffnet, sodass es auch sein Standardverhalten verhindern muss.
Es ist auch möglich zu bemerken, dass das Ereignis beim Ziehen und Abnehmen ein Ereignis enthält. und kopieren Sie es. Das Element wird dem platzierten Div hinzugefügt.
Hier sind andere Methoden des Objekts:
Event.datatransfer:
items = [Object DataTransfertemlist] @@ Drag_drop.html: 44
Dateien = [Objektfilelist] @@ Drag_drop.html: 44
Typen = text/plain @@ Drag_drop.html: 44
effectalowed = alle @@ Drag_drop.html: 44
Dropeffect = none @@ Drag_drop.html: 44
cleartata = function Cleanata () {[nativer Code]} @@ Drag_drop.html: 44
getData = fuory getData () {[nativer Code]} @@ Drag_drop.html: 44
setData = function setData () {[nativer Code]} @@ Drag_drop.html: 44
setdragimage = function setDagimage () {[nativer Code]} @@
Ich habe JS verwendet, um alle Attribute auszudrucken:
1. GetData, SetDatas Beispiele wurden im obigen Beispiel verwendet. ClearData soll die Einstellungsdaten löschen.
2. Wenn eine oder mehrere im Betriebssystem ausgewählte Dateien in die DIV gezogen werden, werden die Informationen der Datei in der Datei hochgeladen.
3. Setdragimage (Bild, x, y) wird verwendet, um die Renderings der Bewegung mit der Maus während der Mausbewegung einzustellen. Muss in Dragstart eingestellt werden.
4. Typen, Effectalowed und Dropffect sind die Arten des Ziehens in das Element.
Das oben genannte ist der Inhalt dieses Artikels.