Sample code to implement HTML5 drag and drop

The following editor will bring you a simple example ofHTML5drag and drop. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look.

Drag-related attributes

The draggable attribute is theglobal attributeof html5. It is one of the ways that HTML5 supports drag and drop operations. It is used to indicate whether the element can be dragged and dropped. Draggable has three values. true means that it can be dragged and dropped, false means that it cannot be dragged and dropped, and auto means that the browser's default value is used

 
列表1
 
列表2
 
列表3
 
列表4
 
列表5
 
列表6
 

Drag-relatedEvents

ondragstart: This event triggers ondrag when the user starts dragging an element or selecting text : Triggered when the element is being dragged ondragend: Triggered when the user completes the drag and drop of the element ondragleave: Triggered when theobjectdragged by the mouse leaves its container scope ondragover: When a dragged object is in another This event is triggered when dragging within the scope of the object container. This event occurs on the target element. ondrop: During a dragging process, this event is triggered when the mouse is released. This event acts on the target element.

dataTransfer object related methods

setData(format,data): Add a custom data format getData(format): Get a custom data format clearData([format]): Clear the customization Data format and data

Event.preventDefault()

This method is the default behavior to prevent events. PreventDefault() must be executed in ondragover, otherwise ondrop events Will not be triggered

Implementation case:

       
  
 
垃圾箱
 
 
 
列表1
 
列表2
 
列表3
 
列表4
 
列表5
 
列表6
 
 
 
 
 
拖到垃圾箱删除列表
  

The above is the detailed content of Sample code to implement HTML5 drag and drop. For more information, please follow other related articles on the PHP Chinese website!