HTML5 Drag and drop instance

Dragging related properties

The Draggable property is a global property of HTML5 and is one of the ways that HTML5 supports drag-and-drop operations to indicate whether an element can be dragged and dropped, a draggable with three values, true to drag and drop, false to not be dragged, and auto to use the browser's default value

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

Dragging and dropping related events

Ondragstart: This event triggers Ondrag when the user starts to drag an element or selects text: triggered when the element is being dragged Ondragend: triggers when the user completes the drag-and-drop of the element ondragleave: triggers when the object dragged by the mouse leaves its container range ondragover : This event is triggered when a dragged object is dragged within the scope of another object container, and this event occurs on the target element OnDrop: triggered when the mouse is released during a drag, 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 formats and data

Event.preventdefault ()

This method is the default behavior for blocking events and must be performed preventdefault () in OnDragOver, otherwise ondrop events will not be triggered

Implementation case:

<!        DOCTYPE html> 
Original Address: http://dadifeihong.com/html5tuo-zhuai/
Scan code concern: front-end applications-more practical case content

HTML5 Drag and drop instance