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
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:
垃圾箱
拖到垃圾箱删除列表
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!