HTML5 drag and drop instances, html5 drag

HTML5 drag and drop instances, html5 drag
Drag and Drop Related Properties

The draggable attribute is a global attribute of html5. It is one of the ways that html5 supports drag-and-drop operations. It is used to indicate whether an element can be dragged and dropped. draggable has three values. true indicates that the element can be dragged and dropped, false indicates that the browser cannot be dragged or dragged. auto indicates that the default value of the browser is used.

<Ul> <li id = "item1" draggable = "true"> List 1 </li> <li id = "item2" draggable = "true"> List 2 </li> <li id = "item3" draggable = "true"> List 3 </li> <li id = "item4" draggable = "true"> list 4 </li> <li id = "item5" draggable = "true"> List 5 </li> <li id = "item6" draggable = "true"> list 6 </li> </ul>

Drag related events

Ondragstart: This event triggers ondrag when the user starts to drag an element or selects text: triggers ondragend when the element is being dragged: triggers ondragleave when the user completes the drag-and-drop of an element: ondragover is triggered when the dragged object leaves the container range: this event is triggered when the dragged object is dragged within the container range of another object, this event occurs on the target element ondrop: triggered when the mouse is released during a drag process. This event acts on the target element.

DataTransfer object related methods

SetData (format, data): Add Custom data format getData (format): Get custom data format clearData ([format]): Clear Custom data format and data

Event. preventDefault ()

This method prevents the default action of an event. In ondragover, you must execute preventDefault (). Otherwise, the ondrop event will not be triggered.

Implementation case:

<! DOCTYPE html> 
Address: http://dadifeihong.com/html5tuo-zhuai/
Qr scanning: front-end applications-more practical cases