jQuery Nestable是一個用于創建可拖動嵌套列表的jQuery插件。它能夠讓你創建一個可以拖動、排序、縮放的嵌套列表,非常適合于創建網站的導航菜單、拖動整理工具等。
下面是一個簡單的示例:
<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> <li class="dd-item" data-id="5"> <div class="dd-handle">Item 5</div> </li> </ol> </div> <script> $('.dd').nestable(); </script>
在這個示例中,我們創建了一個嵌套列表,其中包含三個頂級列表項。我們使用jQuery Nestable插件來處理拖放功能,只需要添加$('.dd').nestable()這一行代碼就可以了。
如果你需要更多定制,jQuery Nestable提供了許多選項。例如,你可以通過添加help屬性來顯示幫助消息,或者使用maxDepth屬性來限制列表的高度。
總之,jQuery Nestable是一個非常有用和方便的工具,它可以大大提高網站的用戶體驗。如果你需要創建一個拖動排序的嵌套列表,那么jQuery Nestable絕對是一個不錯的選擇。