Компонент Сортируемые элементы

Сортировка элементов с помощью перетаскивания. Создавайте сортируемые grid-сетки и списки с возможностью изменить порядок их элементов. Добавление пользовательских классов при сортировке.

Перетаскивайте элемент (drag and drop) в новое место в сортируемой grid-сетке, в то время как другие элементы самостоятельно приспосабливаются, чтобы соответствовать. Это прекрасно, когда вы хотите отсортировать такие элементы, как, например, галерея или пункты меню.

Sortable: Руководство

Чтобы применить компонент Сортируемые элементы добавьте атрибут uk-sortable в контейнер и создайте дочерние элементы. 

<div uk-sortable>
    <div></div>
    <div></div>
</div>

<!-- или списком -->
<ul uk-sortable>
    <li></li>
    <li></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-text-center" uk-sortable="handle: .uk-card" uk-grid>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Элемент 1</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Блок 2</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Впрочем 3</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Условия 4</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Считаем 5</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Поэтому 6</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Укажем 7</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">В общем 8</div>
    </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>

Параметры для атрибута

При использовании компонента Sortable к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опции компонента

Опция Значение По умолчанию Описание
group String Группа.
animation String, Boolean slide Режим анимации: slide, false.
duration Number 250 Продолжительность анимации.
threshold Number 5 Порог перемещения мыши перед началом перетаскивания.
cls-item String uk-sortable-item Класс элемента.
cls-placeholder String uk-sortable-placeholder Класс заполнителя.
cls-drag String uk-sortable-drag Класс призраков.
cls-drag-state String uk-drag Класс перетаскивания.
cls-base String uk-sortable Класс списка.
cls-no-drag String uk-sortable-nodrag Отключите перетаскивание элементов с этим классом.
cls-empty String uk-sortable-empty Класс пустого списка.
cls-custom String Пользовательский класс призрака.
handle String false Селектор handle.

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.sortable(element, options);

События

Следующие события будут инициированы для элементов компонента «Sortable»:

Имя события Описание
start Запускается после начала перетаскивания.
stop Запускается после остановки перетаскивания.
moved Срабатывает после того, как элемент был перемещен.
added Запускается после добавления элемента.
removed Срабатывает после того, как элемент был удален.