天天看點

dragsort html拖拽排序

一、Jquery List DragSort

下載下傳dragsort之後,解壓如下圖所示,

  

dragsort html拖拽排序

  我們使用到的隻有裡面的jquery.dragsort-0.5.2.js這個檔案,也可以使用壓縮版的min.js。

二、執行個體

  1、使用

  将jquery.dragsort-0.5.2.js,與jquery-2.1.3.min.js拷貝到同一個檔案夾,建立html頁面。引入這兩個js檔案。注意jquery在dragsort上面引入。相關代碼如下:

  其中兩個input的值為li的id(以","連接配接),id值的順序辨別目前分組li的排列順序。跨組拖動的時候兩個input中的值會随之改變。進而達到跨組移動的效果。需要儲存的時候,直接使用ajax将兩個input的值進行送出,背景解析資料儲存到資料庫即可。

  2、效果如下。

dragsort html拖拽排序