Html5 Sortable. js source code analysis, html5sortable. js
Recently, a drag-and-drop Sortable. js plug-in is often used in company projects. So when I have time, I read the source code of Sortable. js, which is more than 1300 lines in total. This is perfect. These events are mainly used for drag and drop operations,
Ondragstart event: the event triggered when the drag-and-drop element starts to be dragged. This event acts on the dragged element.
Ondragenter event: the event triggered when the drag element enters the target element. This event acts on the target element.
Ondragover event: the event triggered when the drag and drop element moves on the target element. This event acts on the target element.
Ondrop event: the event triggered when the dragged element is on the target element and the mouse is opened. This event acts on the target element.
Ondragend event: the event triggered after the drag operation is complete. This event acts on the dragged element.
The main difference is that when the ondragstart event and the ondragover event occur during drag and drop, the node is switched to each other. Of course, this is only the simplest drag and drop sorting method, many techniques are used in this section to determine whether to scroll the parent node of the root node above the drag element, or scroll the scroll bar on the window, And getBoundingClientRect () attribute determines whether the cursor is on the left, right, top, or bottom of the dom node. In addition, the callback and functional programming methods are used to declare a function, and boolean values are used for addition and subtraction, 0 and 1 judgment, and event binding is used to determine different elements in the two lists, these are all very interesting technologies.
Note: This plug-in is dragged using html5, so it does not support browsers earlier than ie9
Next, let's take a look at the simple dome and load the js Sortable. js plug, and app.css. to create a simple drag operation, you only need to pass a dom node in. The second parameter is used to pass an empty object in.
Of course, it doesn't matter if app.css is added or not. If not, you need to add a style.
. Sortable-ghost {
Opacity: 0.4;
Background-color: # F4E2C9;
}
The shadow effect is better when you drag it.
1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 2
The plug-in also provides an animation for drag and drop to make drag and drop more dazzling. It is easy to add one more parameter to the animation: 150, and the animation execution time within the drag and drop time. It is not supported by ie9 or earlier browsers with CSS 3 animation.
1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 2
This plug-in not only provides the drag and drop function, but also provides sorting After dragging. Of course, the sorting thinking is very simple, determine the node where the mouse is dragged down and the two elements that are dragged to the target node determine the location of their dom nodes when ondragover occurs, and swap the dom location to form a sorting. After dragging, only the Sortable. js plug-in provides several event interfaces. Let's take a look at the dome,
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> untitled document </title>Let's take a look at the above example. First, let's take a look at the event sequence when the drag is complete.
OnAdd onRemove is not triggered. This event occurs only when the drag data in the list is increased or decreased. Of course, if you are interested, you can check the sequence and conditions of the event.
There is also an evt parameter passed. Let's see what this parameter has. The main function of modifying the _ dispatchEvent function is to create an event. The event parameter is mainly provided by the name and trigger the event. In fact, it is to simulate the event and trigger the event.
Let's look at the key source code for function modification.
Var evt = document. createEvent ('event'), // create an Event
Options = (sortable | rootEl [expando]). options, // obtain the options Parameter
// Name. charAt (0) gets the first string of name
// Convert toUpperCase () to uppercase
// Name. substr (1) extract the string from Index 1 subscript to the end position of the string
// OnName: the string obtained from the first subscript of on + first letter in uppercase + name
OnName = 'on' + name. charAt (0). toUpperCase () + name. substr (1 );
Evt. initEvent (name, true, true); // customize an event
Evt. to = rootEl; // when an evt event is triggered, add one more to attribute to the evt, with the value of "rootEl"
Evt. from = fromEl | rootEl; // when this event is triggered and evt occurs, add one more to attribute to the evt with the value of "rootEl"
Evt. item = targetEl | rootEl; // when this event is triggered and evt occurs, add one more to attribute to the evt with the value of "rootEl ".
Evt. clone = cloneEl; // when an evt event is triggered, add one more to attribute to the evt with the value of "rootEl ".
Evt. oldIndex = startIndex; // start to drag a node.
Evt. newIndex = newIndex; // current node
// Trigger the event on the rootEl node. This is the trigger event interface. OnAdd: onUpdate: onRemove: onStart: onSort: onEnd:
How can we sort the next event? In fact, it is very simple, as long as we add a drag-id in the sorting list, there are several events in the drag process onAdd, onUpdate, onRemove, onStart, onSort, onEnd,
Then we do not need to care about so many events, nor do we need to care about what happened during drag-and-drop. Then we are concerned that after the drag and drop ends, we only need to call the onEnd event, and then the modified interface will provide the evt. In the evt, A from node can be the root node of the drag list.
You only need to get the byte under the changed node to get the sorting id. See dome<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> untitled document </title>The plug-in also provides multi-list drag and drop. The following dome is to drag from list a to list B, list B to list a, and then the main parameter is group
If the group is not an object, it becomes an object, and the name of the group object is equal to the value of the group, and the default value of the ['pull ', 'put'] attribute is true.
If you set group {
Pull: true, you can drag it to another list. Otherwise, vice versa.
Put: true, you can place data from other lists to the Change List, false, and vice versa.
}
Pull: 'clone '. Another function is to clone a node that is not deleted when the list is dragged to another list.To check whether a simple list is dragged to each other, you only need to set the group: "words" parameter, and the group name must be the same before the dome parameter can be dragged to each other.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> untitled document </title>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
