一個簡潔漂亮的jQuery拖放排序插件DDSort

拖放排序是WEB應用中常見的功能。雖然網上有不少別人已經造好的輪子，可是就我我的而言，沒事就喜歡研究原理，本身造輪子，無論強大與否，簡潔夠用就是個人目標，再一個就是本身寫的東西，應用起來駕輕就熟，修改或者擴展起來也是駕輕就熟，相比一些API不夠詳細，或者說用戶體驗很差（不夠簡明）的API來講，或者說插件自己就沒考慮周到，考慮周到又顯得臃腫來講，使用它還不如造它。

接下來回到插件，先看看漂亮的UI（參照Teambition的任務面板作的，算不算廣告 [/驚歎]），插件目前只作了（針對）上下拖放排序，左右拖放排序等有時間再作（我但願API是極度簡單的，即使增長左右排序）：

2、插件原理（授人以魚還要授人以漁）：

一、肯定要拖放的一堆元素，正常狀況是一堆li（假設如今的Demo是li）。

二、給每一個li添加鼠標按下(elem.onmousedown)，和按下移動(document.onmousemove)，按下擡起的事件(document.onmouseup)，相似於拖拽的原理，鑑於性能，應該考慮用事件委託的形式。

三、當拖動元素執行move事件的時候，在它前面建立並添加一個跟它同樣樣式的元素並清空內容用於佔位操做（假設這個佔位元素叫clone），再把拖動元素設置爲絕對定位，並把它的DOM結構放到父級（ul）的末尾。

四、在移動過程當中判斷拖動的元素的top值與clone元素的上一個兄弟節點比較，若是top小於上一個兄弟節點的offset().top值（這裏，本插件用top值與offset().top - 兄弟節點的height()/2，交互形式不一樣而已），那麼就將clone元素與上一個兄弟節點交換DOM結構便可，同理判斷top是否大於下一個兄弟節點的offset().top值，若是大於就讓clone元素與下一個兄弟節點交換DOM結構便可。

五、當中的一些細節處理和兼容處理先略過。

 

3、簡潔：插件加上那麼多漂亮的空行和註釋才115行GitHub地址。

 

4、使用方法：

一、假設Html結構以下：

<div id="wrap">
    <ul>
        <li>...</li>
        <li>...</li> ... </ul>
</div>

二、依次引入jquery.js和ddsort.js，而後使用DDSort API實現如圖拖放排序效果：

$( '#wrap' ).DDSort({ target: 'li', floatStyle: { 'border': '1px solid #ccc', 'background-color': '#fff' } });

 

5、詳細API（其實也是極少極簡單）：

DDSort方法只接受一個JSON對象類型的參數，如下是對這個參數的描述。

參數列表	類型	描述
target	string	插件內部使用的是jQuery的on方法綁定的事件，此參數就是on方法上的選擇器字符串
cloneStyle	object	可選，設置佔位符元素的樣式
floatStyle	object	可選，設置拖動元素的樣式
down	function	可選，鼠標按下時執行的函數
move	function	可選，鼠標移動時執行的函數
up	function	可選，鼠標擡起時執行的函數

 

6、插件目前還很小，雖然夠正常的使用，可是有些不正常的樣式可能還未考慮到，好比說當li的某個父級有相對定位時（父級不是body），拖動元素的left，top值就會存在問題，固然也許這個跟業務的增加和DOM結構有關，目前我還沒接觸到這樣的結構，因此歡迎有志趣的小夥伴Fork DDSort，提交你酷炫簡潔的代碼。

 

7、插件地址與下載：https://github.com/Barrior/DDSort，感謝Star。