# 可嵌套/Nestable 創建可以通過拖拽排序的可嵌套式列表。 可嵌套組件允許你通過拖拽排序條目。這是非常有用的，比如在管理界面中希望組織不同的分類或者菜單條目時。 * * * ## 用法 可嵌套列表由列表本身、它的內容條目和可嵌套的面板組成。注意 使用此組件需要額外添加 `nestable.css` 文件，在`css/components`文件夾中。此組件需要額外添加 `nestable.js` 文件，在`js/components`文件夾中。 | class和data屬性 | 描述 | | --- | --- | | `.uk-nestable` | 添加此類名到 `&lt;ul&gt;` 元素，定義可嵌套組件。 | | `.uk-nestable-item` | 添加此類名到列表的每一個 `&lt;li&gt;` 元素。 | | `.uk-nestable-panel` | 添加此類名到 `&lt;li&gt;` 元素內部的 `&lt;div&gt;` 元素，給條目設定樣式。 | NOTE 為了使必要的JavaScript生效，需要添加 `data-uk-nestable` 屬性。 ### Example  ### Markup ``` <ul class="uk-nestable" data-uk-nestable> <li class="uk-nestable-item"> <div class="uk-nestable-panel"> ... </div> </li> </ul> ``` * * * ## 可嵌套組件的手柄/Nestable handle 默認地，整個可嵌套元素都可以用來拖拽排序。要創建一個替換默認效果的手柄，需要添加 `{handleClass:'uk-nestable-handle'}` 選項到data 屬性中。并為你想要用作手柄的元素添加手柄的類名。 ### Example  NOTE 在這個例子中，我們使用了 [圖標組件](icon.html) 中的 `.uk-icon-bars` 類名，來為手柄定義樣式。 ### Markup ``` <ul class="uk-nestable" data-uk-nestable="{handleClass:'uk-nestable-handle'}"> <li class="uk-nestable-item"> <div class="uk-nestable-panel"> <div class="uk-nestable-handle"></div> ... </div> </li> </ul> ``` * * * ## 可嵌套撥動/Nestable toggle 默認地，整個可嵌套元素都能拖拽排序。要創建一個替換默認效果的手柄，需要添加 `.uk-nestable-toggle` 類名和 `data-nestable-action="toggle"` 屬性到可嵌套面板內的 `&lt;div&gt;` 元素。 ### Example  ### Markup ``` <ul class="uk-nestable" data-uk-nestable"> <li class="uk-nestable-item"> <div class="uk-nestable-panel"> <div class="uk-nestable-toggle" data-nestable-action="toggle"></div> ... </div> </li> </ul> ``` * * * ## 多個列表的排序 要實現垮列表的排序，你可以為每個列表添加e `data-uk-nestable="{group:'GROUP-NAME'}"` 屬性將他們歸為一組。 ### Example  ### Markup ``` <ul class="uk-nestable" data-uk-nestable="{group:'my-group'}">...</ul> <ul class="uk-nestable" data-uk-nestable="{group:'my-group'}">...</ul> ``` * * * ## 禁用嵌套 禁用列表條目的嵌套，你只需添加 `data-uk-nestable="{maxDepth:1}"` 屬性。當然你還可以使用此屬性來確定要嵌套的深度能有多大。  ### Markup ``` <ul class="uk-nestable" data-uk-nestable="{maxDepth:1}">...</ul> ``` * * * ## JavaScript 選項 這是一個如何使用data屬性來設置選項的例子: ``` data-uk-nestable="{maxDepth:0, group:'widgets'}" ``` | 選項 | 可用值 | 默認值 | 描述 | | --- | --- | --- | --- | | `group` | string | false | 列表組 | | `maxDepth` | integer | 10 | 最大嵌套層數 | | `threshold` | integer | 20 | 以px為單位，開始拖拽的閾值。 | | `listNodeName` | string | ul | 列表節點名稱 | | `itemNodeName` | string | li | 條目節點名稱 | | `listBaseClass` | string | uk-nestable | 列表的基本類名 | | `listClass` | string | uk-nestable-list | 列表的類名 | | `listitemClass` | string | uk-nestable-list-item | 列表條目的類名 | | `itemClass` | string | uk-nestable-item | 條目類名 | | `dragClass` | string | uk-nestable-list-dragged | 添加到被拖拽列表的類名 | | `movingClass` | string | uk-nestable-moving | 拖動時添加到 `&lt;html&gt;` 元素的類名 | | `handleClass` | string | uk-nestable-handle | 拖拽手柄的類名 | | `collapsedClass` | string | uk-nestable-collapsed | 被收縮的條目的類名 | | `placeClass` | string | uk-nestable-placeholder | 當前被拖拽元素的占位符類名 | | `noDragClass` | string | uk-nestable-nodrag | 帶有此類名的元素不會觸發拖拽。Elements with this class will not trigger dragging. Useful when having the complete item draggable and not just the handle. | | `noChildrenClass` | string | uk-nestable-nochildren | 帶有此class的元素不再有子級元素。這對于最低層級的條目很有用。 | | `emptyClass` | string | uk-nestable-empty | 空列表的類名 | ### 手動初始化 ``` var nestable = UIkit.nestable(element, { /* options */ }); ``` ### Events | 名稱 | 參數 | 描述 | | --- | --- | --- | | `start.uk.nestable` | event, nestable object | 拖拽開始時觸發 | | `move.uk.nestable` | event, nestable object | 移動可嵌套條目時觸發 | | `stop.uk.nestable` | event, nestable object | 拖拽終止時觸發 | | `change.uk.nestable` | event, nestable item, action | 改變可嵌套條目時觸發 |