HTML5 CSS3-Implementierung von Drag & Drop (Drag and Drop) example_html5 Tutorial-Fähigkeiten

In diesem Artikel wird kurz die Drag-and-Drop-Implementierung von HTML5 vorgestellt.
Drag and Drop sind Teil des HTML5-Standards.
Browserunterstützung: Internet Explorer 9, Firefox, Opera 12, Chrome und Safari 5 unterstützen Drag & Drop.

Gezogenes Element, DragElement:
(1) Ereignis hinzufügen: ondragstart
(2) Attribut hinzufügen: Dragable

Elemente platzieren, dropElement:
1. Ereignisse hinzufügen: ondargenter, ondragover, ondragleave, ondragend, ondrop
Es ist den Ereignissen von Mouse In und Out sehr ähnlich und die Wörter sind daher leicht zu verstehen Ich werde nicht auf Details eingehen, im Folgenden werden Beispiele zur Veranschaulichung verwendet.

2. Drag & Drop zwischen Elementen auf der Seite
Das Folgende ist ein kleines Beispiel für Drag & Drop zwischen Divs, um zu zeigen, wie jedes Ereignis ausgelöst wird:

Code kopieren

Der Code lautet wie folgt: