HTML5 drag event notes and html5 drag events

HTML5 drag event notes and html5 drag events

In HTML5 specifications, you can add 'draggable = "true" 'to the element to determine whether the element can be dragged. Images and links are enabled by default.

1. Drag element: the 'draggable = "true" 'element is set.

When an element is dragged, the following events are triggered in sequence:

1. dragstart (when you press the mouse and start to move the mouse, the dragstart event will be triggered on the drag-and-drop element)

2. drag (after the dragstart event is triggered, the drag time is triggered immediately, and the event is continuously triggered when the element is dragged)

3. dragend (when the drag is stopped, the dragend event is triggered no matter whether the element is put to a valid placement target)

2. Target element: Any element on the page can be a target element.

When an element is dragged to a valid target, the following events occur in sequence:

1. dragenter (the dragenter event will be triggered as long as there are element times dragged to the target)

2. dragover (the dragover event is triggered immediately after dragenter is triggered. When the dragged target remains within the target range, the dragover event will be continuously triggered)

3. dragleave or drop (if an element is dragged out of the position target, the dragover event will not be triggered, but will trigger the dragleave event; if the element is put into the target element, the drop event instead of the dragleave event will be triggered)

3. Custom target Element

Although all elements support the placement of target events, these elements are not allowed by default. If you drag an element that is not allowed to be placed, no matter how Yonghui operates, the drop event is triggered.

To allow placement, We must block the default Processing Method for elements:

You must call the event of the dragover event. the preventDefault () method is used to prevent default events, that is, the attribute cannot be placed when the target element is changed. When the element is released by the mouse on the target element, the drop event is triggered.