Компонент Сортируемые элементы Sortable
Сортировка элементов с помощью перетаскивания. Создавайте сортируемые grid-сетки и списки с возможностью изменить порядок их элементов. Добавление пользовательских классов при сортировке.
Перетаскивайте элемент (drag and drop) в новое место в сортируемой grid-сетке, в то время как другие элементы самостоятельно приспосабливаются, чтобы соответствовать. Это прекрасно, когда вы хотите отсортировать такие элементы, как, например, галерея или пункты меню.
Руководство
Sortable
Чтобы применить компонент Сортируемые элементы
добавьте атрибут uk-sortable
в контейнер и создайте дочерние элементы.
<div uk-sortable>
<div></div>
<div></div>
</div>
<!-- или списком -->
<ul uk-sortable>
<li></li>
<li></li>
</ul>
Сортируемая рука
Handle
По умолчанию весь сортируемый элемент может использоваться для сортировки с помощью перетаскивания. Чтобы создать Handle, точку, которая будет использоваться вместо этого, добавьте опцию handle: SELECTOR
в атрибут и добавьте соответствующий класс к элементу, который вы хотите использовать в качестве Handle.
<ul uk-sortable="handle: .uk-sortable-handle">
<li>
<div class="uk-sortable-handle"></div>
...
</li>
</ul>
-
-
Handle 01
-
Точка 02
-
Handle 03
-
Точка 04
-
Handle 05
-
Handle 06
-
Handle 07
-
Handle 08
-
-
<ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-text-center" 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-small-right" uk-icon="icon: table"></span>Handle 01 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Точка 02 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Handle 03 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Точка 04 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Handle 05 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Handle 06 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Handle 07 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Handle 08 </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>Группа 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">Элемент 1</div> </div> <div class="uk-margin"> <div class="uk-card uk-card-default uk-card-body uk-card-small">Элемент 2</div> </div> <div class="uk-margin"> <div class="uk-card uk-card-default uk-card-body uk-card-small">Элемент 3</div> </div> <div class="uk-margin"> <div class="uk-card uk-card-default uk-card-body uk-card-small">Элемент 4</div> </div> </div> </div> <div> <h4>Группа 2</h4> <div uk-sortable="group: sortable-group"> <div class="uk-margin"> <div class="uk-card uk-card-primary uk-card-body uk-card-small">Блок 1</div> </div> <div class="uk-margin"> <div class="uk-card uk-card-primary uk-card-body uk-card-small">Блок 2</div> </div> <div class="uk-margin"> <div class="uk-card uk-card-primary uk-card-body uk-card-small">Блок 3</div> </div> <div class="uk-margin"> <div class="uk-card uk-card-primary uk-card-body uk-card-small">Блок 4</div> </div> </div> </div> <div> <h4>Пустая группа</h4> <div uk-sortable="group: sortable-group"></div> </div> </div>
Пользовательский класс
Вы также можете применить один или несколько пользовательских классов к элементам, в тот момент, когда они перетаскиваются.
Для этого добавьте к атрибуту опцию cls-custom: MY-CLASS
.
<ul uk-sortable="cls-custom: my-class">...</ul>
box-shadow
и background
.
-
-
<ul class="uk-nav uk-nav-default uk-width-medium" uk-sortable="cls-custom: uk-box-shadow-small uk-background uk-flex uk-flex-middle"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Элемент списка</a></li> <li><a href="#">Накопление списка</a></li> <li><a href="#">Действия списка</a></li> <li><a href="#">Борьба списка</a></li> </ul>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.sortable(element, options);
События
Следующие события будут инициированы для элементов компонента «Sortable»:
Имя события | Описание |
---|---|
start |
Запускается после начала перетаскивания. |
stop |
Запускается после остановки перетаскивания. |
moved |
Срабатывает после того, как элемент был перемещен. |
added |
Запускается после добавления элемента. |
removed |
Срабатывает после того, как элемент был удален. |