This article describes how to implement the drag-and-drop function in HTML5 + CSS3. For more information, see the following section.
Drag and drop is an integral part of the HTML5 standard.
Browser support: Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.
Dragged element, dragElement:
(1) Add an event: ondragstart
(2) Add property: dragable
Placement element, dropElement:
1. Add events: ondargenter, ondragover, ondragleave, ondragend, ondrop
It is very similar to the one-class events that are categorized into one category by kms, which are both literal and understandable. If you do not describe them in detail, the following example will be used to describe them.
2. Drag and Drop between elements on the page
The following uses a small example: drag and drop between p to show how events are triggered:
The Code is as follows: