A simple and beautiful jquery drag-and-drop sorting plugin Ddsort

Drag-and-drop sorting is a common feature in web apps. Although there are a lot of other people have made the wheel on the net, but personally, I do not like the principle of research, self-made wheels, whether strong or not, concise enough is my goal, and then one is to write their own things, apply it handy, modify or expand it is handy, compared to some of the API is not detailed, Or the user experience is not good (not concise) of the API, or the plug-in itself is not thoughtful, thoughtful and look bloated, use it rather than build it.

Then go back to the plug-in, first look at the beautiful UI (referring to Teambition's task panel, not counting ads), plug-ins currently only do (for) up and down drag-and-drop sorting, left and right drag and drop sort and so on time to do (I hope the API is extremely simple, even if the left and right sort):

Second, the principle of the plug-in (give people to fish also to grant people to fishing):

1. Determine a bunch of elements to drag and drop, normally a bunch of Li (assuming the demo is Li).

2, to each Li Add Mouse press (Elem.onmousedown), and press the Move (Document.onmousemove), press the raised event (Document.onmouseup), similar to the principle of drag, in view of performance, You should consider the form of an event delegate.

3. When dragging an element to perform a move event, create and add an element of the same style to it before it and empty the content for placeholder operations (assuming this placeholder is called clone), set the drag element to absolute positioning, and place its DOM structure at the end of the parent (UL).

4. During the move, the top value of the dragged element is judged compared to the previous sibling node of the clone element, if top is less than offset () of the previous sibling node. Top value (here, this plugin uses the top value with offset (). Top-sibling node height ()/ 2, the interaction form is different), then the clone element and the previous sibling Exchange DOM structure, the same way to determine whether top is greater than the next sibling node offset (). The top value, if greater than the clone element and the next sibling node to exchange the DOM structure.

5, some of the details of processing and compatibility with the first skip.

Three, concise: plug-in plus so many beautiful empty lines and comments only 115 line GitHub address.

Iv. Methods of Use:

1. Assume that the HTML structure is as follows:

<DivID= "Wrap">    <ul>        <Li>...</Li>        <Li>...</Li>        ...    </ul></Div>

2. Introduce Jquery.js and ddsort.js in turn, then use the Ddsort API to achieve drag-and-drop sorting effects:

$ (' #wrap ' ). Ddsort ({    ' li ',    floatstyle: {        ' border ': ' 1px solid #ccc ',        ' Background-color ' : ' #fff '    }});

Five, detailed API (in fact, is very rarely very simple):

The Ddsort method accepts only one parameter of the JSON object type, and the following is a description of the parameter.

Parameter list	Type	Describe
Target	String	The plugin internally uses the jquery on method bound event, which is the selector string on the on method
Clonestyle	Object	Optional, set the style of the placeholder element
Floatstyle	Object	Optional, set the style of the dragged element
Down	function	Optional, functions performed when the mouse is pressed
Move	function	Optional, functions that are executed when the mouse moves
Up	function	Optional, functions to be performed when the mouse is lifted

Six, the plug-in is still very small, although normal use, but some of the abnormal style may not be considered, for example, when a parent of Li has relative positioning (the parent is not body), the left,top value of the dragged element will have problems, Of course maybe this is related to the growth of the business and the structure of the DOM, and I'm not yet in touch with the structure, so I'd like to welcome a little partner Fork Ddsort to submit your cool and concise code.

vii. plugin address and download: Https://github.com/Barrior/DDSort

A simple and beautiful jquery drag-and-drop sorting plugin Ddsort