Права доступа

SortableJS — это легковесная и мощная библиотека для реализации перетаскивания элементов списков и сеток в JavaScript. Для начала работы необходимо подключить библиотеку к проекту. Доступно несколько способов: через CDN или установку через npm/yarn.

Подключение через CDN:

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

Подключение через npm:

npm install sortablejs

После подключения создается экземпляр Sortable на контейнере, элементы которого будут перетаскиваться:

const list = document.getElementById('items');
const sortable = new Sortable(list, {
    animation: 150,
    ghostClass: 'sortable-ghost'
});

Ключевые параметры:

  • animation — скорость анимации перемещения элементов.
  • ghostClass — CSS-класс для элемента-призрака при перетаскивании.
  • handle — селектор, ограничивающий область перетаскивания.

Управление правами доступа к сортировке

Одной из мощных возможностей SortableJS является контроль над тем, кто и как может перетаскивать элементы. Это особенно важно при работе с интерфейсами, где разные пользователи имеют разные уровни доступа к данным.

Ограничение по роли пользователя

Используется параметр filter для блокировки определенных элементов:

const sortable = new Sortable(list, {
    filter: '.no-drag',
    onFilter: function(evt) {
        console.log('Перетаскивание запрещено для этого элемента');
    }
});
  • Элементы с классом .no-drag не подлежат перемещению.
  • Событие onFilter позволяет реагировать на попытку перемещения заблокированного элемента.

Ограничение на определенные действия

Параметр handle позволяет задавать конкретные элементы, которые могут служить «ручкой» для перемещения:

const sortable = new Sortable(list, {
    handle: '.drag-handle'
});
  • Только элементы внутри .drag-handle будут перетаскиваться.
  • Это позволяет разграничивать права доступа внутри одного контейнера.

Разграничение доступа к контейнерам

SortableJS поддерживает возможность связывать несколько списков между собой (group). Это удобно для настройки прав доступа на уровне контейнеров.

const groupOptions = {
    name: 'shared',
    pull: function(to, from, dragEl) {
        return dragEl.classList.contains('allowed');
    },
    put: function(to, from, dragEl) {
        return dragEl.dataset.role === 'editor';
    }
};

const sortable1 = new Sortable(document.getElementById('list1'), {
    group: groupOptions
});
const sortable2 = new Sortable(document.getElementById('list2'), {
    group: groupOptions
});
  • pull — определяет, может ли элемент покинуть текущий контейнер.
  • put — определяет, можно ли вставить элемент в контейнер.
  • dragEl.dataset.role позволяет использовать кастомные атрибуты для контроля доступа.

Программное управление доступом

SortaebleJS предоставляет методы для динамического изменения прав доступа без пересоздания экземпляра:

sortable.option('disabled', true); // блокировка всех операций
sortable.option('disabled', false); // снятие блокировки
  • Позволяет изменять доступность сортировки на лету, например, при смене роли пользователя или состояния приложения.

События и права доступа

SortableJS генерирует ряд событий, которые можно использовать для реализации сложной логики контроля:

  • onStart — начало перетаскивания.
  • onEnd — завершение перетаскивания.
  • onAdd — элемент добавлен из другого списка.
  • onRemove — элемент удален в другой список.

Пример ограничения добавления элемента на основе роли:

const sortable = new Sortable(list, {
    group: 'roles',
    onAdd: function(evt) {
        if (evt.item.dataset.role !== 'admin') {
            evt.from.insertBefore(evt.item, evt.from.children[evt.oldIndex]);
            alert('Нет прав для добавления этого элемента');
        }
    }
});
  • В данном примере элемент возвращается на исходную позицию, если у пользователя нет прав на его добавление.
  • Позволяет реализовать сложные сценарии доступа без модификации DOM вручную.

Интеграция с системой авторизации

Для проектов с полноценной системой авторизации SortableJS легко интегрируется с backend-логикой:

const userRole = getCurrentUserRole(); // функция получения роли пользователя

const sortable = new Sortable(list, {
    handle: userRole === 'editor' ? '.drag-handle' : null,
    disabled: userRole !== 'editor'
});
  • handle и disabled управляются на основе роли пользователя.
  • Это минимизирует дублирование кода и повышает безопасность интерфейса.

Настройка визуальных подсказок при ограниченном доступе

Для элементов с ограниченным доступом удобно визуально сигнализировать пользователю:

.no-drag {
    cursor: not-allowed;
    opacity: 0.5;
}
  • Свойство cursor: not-allowed показывает невозможность действия.
  • Снижение opacity усиливает визуальное разделение доступных и заблокированных элементов.

Вывод

SortableJS предоставляет гибкий набор инструментов для управления перетаскиванием элементов с детальной настройкой прав доступа. Комбинация фильтров, обработчиков событий, групп и динамических опций позволяет строить интерфейсы с разделением прав на уровне элемента, контейнера и действия пользователя.

Оглавление