jQuery Nestable是一種可拖放排序的插件,在前端開發中被廣泛應用。它的特點是可以通過將一組嵌套的列表數據折疊和展開的方式進行展現,可以方便地構建多級分類、樹形結構等視圖。
要使用jQuery Nestable,首先需要在頁面中引入jQuery和nestable插件的JS和CSS文件。下面是一個基本的HTML結構:
<div class="dd"> <ol class="dd-list"> <li class="dd-item" data-id="1"> <div class="dd-handle">Item 1</div> </li> <li class="dd-item" data-id="2"> <div class="dd-handle">Item 2</div> <ol class="dd-list"> <li class="dd-item" data-id="3"> <div class="dd-handle">Item 3</div> </li> <li class="dd-item" data-id="4"> <div class="dd-handle">Item 4</div> </li> </ol> </li> </ol> </div>
其中,class為dd的div元素是最外層的容器,class為dd-list的ol元素表示嵌套列表,class為dd-item的li元素表示每一項,data-id是每一項的唯一標識。class為dd-handle的div元素是拖動元素的手柄。
接下來,使用JavaScript進行初始化:
$('div.dd').nestable({ group: 1 });
上面的代碼表示將class為dd的元素通過nestable進行初始化,group為可選參數,可以把多個nestable分組。
除了基本的初始化,nestable還支持事件回調、數據結構的序列化和反序列化等操作,可以根據具體需求進行配置。詳細的使用方法可以參考nestable的官方文檔。