HTML5 sortable.js Source Analysis

Recent company projects often use a drag-and-drop sortable.js plug-in, so when the time to see the sortable.js source code, a total of more than 1300 lines so, writing quite perfect. When dragged, it is mainly done by these events,

Ondragstart Event: An event that is triggered when a drag element starts being dragged, and this event acts on the dragged element
OnDragEnter Event: An event that fires when a dragged element enters the target element, which acts on the target element
OnDragOver Event: An event that is triggered when a drag element is moved on the target element, which acts on the target element
OnDrop event: The dragged element on the target element with the mouse release of the triggered event, which acts on the target element
Ondragend Event: An event triggered when a drag is completed, which acts on the dragged element

The main thing is that when the Ondragstart event and the OnDragOver event occur at the time of the drag and drop, the node exchange position, in fact, is to switch their nodes to each other, of course, this is simply the simplest way to drag and drop, There are many techniques used to scroll through the parent node of the root node of the scroll drag element, or to scroll through the scroll bar above the window, and to use the Getboundingclientrect () property to determine if the mouse is on the left side of the DOM node. Above, or below. It is interesting to use the back-and-function programming to declare functions, to use the addition of Boolean to subtract, to make 0 and 1 judgments, and to use event bindings to determine the different elements in two lists.

HTML5 sortable.js Source Analysis