HTML5 - Drag and Drop

Drag and drop (the Drag and drop) are part of the HTML5 standard.

 

Drag and drop is a common characteristic, that is, after crawling drag the object to another location.

In HTML5, the drag is part of the standard, any element can drag and drop.

 

First, in order that the draggable element, the draggable property to true:

 

 

 

1, dragged objects: dragstart event, the dragged element starts to drag trigger 
2, dragged objects: drag event, the drag and drop elements, drag and drop process 
3, after the object: dragenter event, drag and drop process mouse over the elements, the elements are drag and drop "start" to enter the other elements within the range (just enter) 
4, after the object: dragover event, the process of passing the mouse drag and drop elements, drag and drop the elements are present to move within the range of elements (has been) 
5, after the object: dragleave event, drag and drop mouse over the elements of the process, is to drag and drop elements leave the range of elements 
6, target location: drop event, drag and drop target elements, other elements dragged and dropped into this element 
7, dragged objects: dragend event, drag and drop the object element, drag and drop the end of 


the picture do drag demo practice

js part

 

 

 html part

 

Guess you like

Origin www.cnblogs.com/lovekiku123/p/12355097.html