VGNestable

Сортировка списка

Блокировка

Запрет изменения всего дерева, отдельного элемента или содержимого вложенной группы.

Элемент и вложенная группа

«Главная» не перемещается отдельно. Внутри «Системных страниц» заблокировано содержимое группы, но родительскую ветвь можно перенести целиком.

  1. ГлавнаяЭлемент заблокирован
    Заблокирован
  2. Системные страницыВетвь переносится целиком
    1. Политика конфиденциальностиГруппа заблокирована
      Группа
    2. Пользовательское соглашениеГруппа заблокирована
  3. КонтактыОбычный элемент
serialize()

	


	

	

		

	

		HTML
		
	

	
<div class="vg-nestable" data-vg-toggle="nestable">
  <ol class="vg-nestable-list">
    <li class="vg-nestable-item" data-id="1" data-disabled="true">...</li>
    <li class="vg-nestable-item" data-id="2">
      <div class="vg-nestable-inner">...</div>
      <ol class="vg-nestable-list" data-disabled="true">...</ol>
    </li>
  </ol>
</div>



		

	

		JavaScript
		
	

	
import {VGNestable} from 'vgapp';

const tree = VGNestable.getOrCreateInstance('#locked-tree', {
  disabledattribute: 'data-disabled',
});

// Заблокировать всё дерево программно:
const readonlyTree = VGNestable.getOrCreateInstance('#readonly-tree', {
  disabled: true,
});



		

	

		CSS
		
	

	
/* Заблокированные состояния уже входят в публичные стили VGNestable. */



	






	
Всё деревоdisabled: true или data-disabled="true" на корне запрещает сортировку и приём элементов.

	
Один элементdata-disabled="true" на item запрещает брать его за handle.

	
Вложенная группаАтрибут на дочернем list блокирует его элементы и drop внутрь, сохраняя перенос родителя.