HTML5 CSS3 implementation of drag and drop (Drag and Drop) example_html5 tutorial skills

This article briefly introduces the drag-and-drop implementation of HTML5.
Drag and drop are part of the HTML5 standard.
Browser support: Internet Explorer 9, Firefox, Opera 12, Chrome and Safari 5 support drag and drop.

Draged element, dragElement:
(1) Add event: ondragstart
(2) Add attribute: dragable

Place elements, dropElement:
1. Add events: ondargenter, ondragover, ondragleave, ondragend, ondrop
It is very similar to the events of mouse in and out, and the words are easy to understand, so I won’t go into details. , examples will be used to illustrate below.

2. Drag and drop between elements on the page
The following is a small example of drag and drop between divs to show how each event is triggered:

Copy code

The code is as follows: