拖放排序是WEB應用中常見的功能。雖然網上有很多別人已經造好的輪子，但是就我個人而言，沒事就喜歡研究原理，自己造輪子，不管強大與否，簡潔夠用就是我的目標，再一個就是自己寫的東西，應用起來得心應手，修改或者擴展起來也是得心應手，相比一些API不夠詳細，或者說用戶體驗不好（不夠簡明）的API來說，或者說插件本身就沒考慮周到，考慮周到又顯得臃腫來說，使用它還不如造它。
接下來回到插件，先看看漂亮的UI（參照Teambition的任務面板做的，算不算廣告 [/驚嘆]），插件目前只做了（針對）上下拖放排序，左右拖放排序等有時間再做（我希望API是極度簡單的，即便增加左右排序）：
二、插件原理（授人以魚還要授人以漁）：
1、確定要拖放的一堆元素，正常情況是一堆li（假設現在的Demo是li）。
2、給每個li添加鼠標按下(elem.onmousedown)，和按下移動(document.onmousemove)，按下抬起的事件(document.onmouseup)，類似於拖拽的原理，鑒於性能，應該考慮用事件委托的形式。
3、當拖動元素執行move事件的時候，在它前面創建並添加一個跟它一樣樣式的元素並清空內容用於占位操作（假設這個占位元素叫clone），再把拖動元素設置為絕對定位，並把它的DOM結構放到父級（ul）的末尾。
4、在移動過程中判斷拖動的元素的top值與clone元素的上一個兄弟節點比較，如果top小於上一個兄弟節點的offset().top值（這里，本插件用top值與offset().top - 兄弟節點的height()/2，交互形式不同而已），那么就將clone元素與上一個兄弟節點交換DOM結構即可，同理判斷top是否大於下一個兄弟節點的offset().top值，如果大於就讓clone元素與下一個兄弟節點交換DOM結構即可。
5、當中的一些細節處理和兼容處理先略過。
三、簡潔：插件加上那么多漂亮的空行和注釋才115行GitHub地址。
四、使用方法：
1、假設Html結構如下：
<div id="wrap">
<ul>
<li>...</li>
<li>...</li> ... </ul>
</div>
2、依次引入jquery.js和ddsort.js，然后使用DDSort API實現如圖拖放排序效果：
$( '#wrap' ).DDSort({ target: 'li', floatStyle: { 'border': '1px solid #ccc', 'background-color': '#fff' } });
五、詳細API（其實也是極少極簡單）：
DDSort方法只接受一個JSON對象類型的參數，以下是對這個參數的描述。
| 參數列表 | 類型 | 描述 |
| target | string | 插件內部使用的是jQuery的on方法綁定的事件，此參數就是on方法上的選擇器字符串 |
| cloneStyle | object | 可選，設置占位符元素的樣式 |
| floatStyle | object | 可選，設置拖動元素的樣式 |
| down | function | 可選，鼠標按下時執行的函數 |
| move | function | 可選，鼠標移動時執行的函數 |
| up | function | 可選，鼠標抬起時執行的函數 |
六、插件目前還很小，雖然夠正常的使用，但是有些不正常的樣式可能還未考慮到，比如說當li的某個父級有相對定位時（父級不是body），拖動元素的left，top值就會存在問題，當然也許這個跟業務的增長和DOM結構有關，目前我還沒接觸到這樣的結構，所以歡迎有志趣的小伙伴Fork DDSort，提交你酷炫簡潔的代碼。
七、插件地址與下載：https://github.com/Barrior/DDSort，感謝Star。