可排序
建立可排序的網格和清單，以重新排列其元素的順序。
將元素拖放到可排序網格中的新位置，同時其他項目會調整以適應。如果您想對畫廊或選單項目等項目進行排序，這非常有用。
用法
要應用此元件，請將 uk-sortable 屬性新增至容器並建立子元素。
<div uk-sortable>
<div></div>
<div></div>
</div>-
項目 1
-
項目 2
-
項目 3
-
項目 4
-
項目 5
-
項目 6
-
項目 7
-
項目 8
<ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s" uk-sortable="handle: .uk-card" uk-grid>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 1</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 2</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 3</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 4</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 5</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 6</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 7</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 8</div>
</li>
</ul>
控制柄
預設情況下，整個可排序元素可用於拖放排序。要建立將改為使用的控制柄，只需將 handle: SELECTOR 選項新增至屬性，並將控制柄類別新增至您想要用作控制柄的元素。
<ul uk-sortable="handle: .uk-sortable-handle">
<li>
<div class="uk-sortable-handle"></div>
…
</li>
</ul>-
項目 1
-
項目 2
-
項目 3
-
項目 4
-
項目 5
-
項目 6
-
項目 7
-
項目 8
<ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s" uk-sortable="handle: .uk-sortable-handle" uk-grid>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 1
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 2
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 3
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 4
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 5
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 6
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 7
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 8
</div>
</li>
</ul>群組
為了能夠將項目從一個清單排序到另一個清單，您可以透過將 group: GROUP-NAME 選項新增至每個清單上的 uk-sortable 屬性來將它們分組。
<div uk-sortable="group: my-group">
<div></div>
</div>
<div uk-sortable="group: my-group">
<div></div>
</div>群組 1
項目 1
項目 2
項目 3
項目 4
群組 2
項目 1
項目 2
項目 3
項目 4
空群組
<div class="uk-child-width-1-3@s" uk-grid>
<div>
<h4>Group 1</h4>
<div uk-sortable="group: sortable-group">
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 2</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 3</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 4</div>
</div>
</div>
</div>
<div>
<h4>Group 2</h4>
<div uk-sortable="group: sortable-group">
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 2</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 3</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 4</div>
</div>
</div>
</div>
<div>
<h4>Empty Group</h4>
<div uk-sortable="group: sortable-group"></div>
</div>
</div>自訂類別
您也可以在拖曳項目時將一個或多個自訂類別套用至項目。為此，請將 cls-custom: MY-CLASS 選項新增至屬性。
<ul uk-sortable="cls-custom: my-class">…</ul>注意 在此範例中，我們正在使用來自 導覽元件的導覽。拖曳項目時，它將獲得陰影和背景。
<ul class="uk-nav uk-nav-default uk-width-medium" uk-sortable="cls-custom: uk-box-shadow-small uk-flex uk-flex-middle uk-background">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>元件選項
這些選項中的任何一個都可以套用至元件屬性。以分號分隔多個選項。了解更多
| 選項 | 值 | 預設值 | 描述 |
|---|---|---|---|
group |
字串 | 群組 | |
animation |
字串、布林值 | slide |
動畫模式 (slide, false)。 |
duration |
數字 | 250 |
動畫持續時間，以毫秒為單位。 |
threshold |
數字 | 5 |
拖曳開始前的滑鼠移動閾值。 |
cls-item |
字串 | uk-sortable-item |
項目類別。 |
cls-placeholder |
字串 | uk-sortable-placeholder |
佔位符類別。 |
cls-drag |
字串 | uk-sortable-drag |
虛影類別。 |
cls-drag-state |
字串 | uk-drag |
主體的拖曳類別。 |
cls-base |
字串 | uk-sortable |
清單的類別。 |
cls-no-drag |
字串 | uk-sortable-nodrag |
停用具有此類別的元素上的拖曳。 |
cls-empty |
字串 | uk-sortable-empty |
空白清單類別。 |
cls-custom |
字串 | 虛影的自訂類別。 | |
handle |
字串 | false |
控制柄選取器。 |
JavaScript
深入了解JavaScript 元件。
初始化
UIkit.sortable(element, options);事件
以下事件將在此元件附加的元素上觸發
| 名稱 | 描述 |
|---|---|
start |
在拖曳開始後觸發。 |
stop |
在拖曳停止後觸發。 |
moved |
在移動元素後觸發。 |
added |
在新增元素後觸發。 |
removed |
在移除元素後觸發。 |