乙個簡潔漂亮的jQuery拖放排序外掛程式DDSort

拖放排序是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(
});

五、詳細api（其實也是極少極簡單）：ddsort方法只接受乙個json物件型別的引數，以下是對這個引數的描述。

引數列表

型別描述

target

string

外掛程式內部使用的是jquery的on方法繫結的事件，此引數就是on方法上的選擇器字串

clonestyle

object

可選，設定佔位符元素的樣式

floatstyle

object

可選，設定拖動元素的樣式

down

function

可選，滑鼠按下時執行的函式

move

function

可選，滑鼠移動時執行的函式

upfunction

可選，滑鼠抬起時執行的函式

六、外掛程式目前還很小，雖然夠正常的使用，但是有些不正常的樣式可能還未考慮到，比如說當li的某個父級有相對定位時（父級不是body），拖動元素的left，top值就會存在問題，當然也許這個跟業務的增長和dom結構有關，目前我還沒接觸到這樣的結構，所以歡迎有志趣的小夥伴fork ddsort，提交你酷炫簡潔的**。

乙個簡潔漂亮的jQuery拖放排序外掛程式DDSort

實現檔案拖放的一種簡潔方法

乙個難看的證明和乙個漂亮的證明

最最簡潔的乙個python爬蟲

乙個簡潔漂亮的jQuery拖放排序外掛程式DDSort

實現檔案拖放的一種簡潔方法

乙個難看的證明和乙個漂亮的證明

最最簡潔的乙個python爬蟲

相關推薦