VGNestable

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

Связанные списки

Перенос ветвей между областями одной группы, включая пустой список и ограничение глубины.

Перенос между списками

Перетащите задачу или целую ветвь из «Плана» в пустую колонку «Готово». Оба дерева состоят в группе board.

ПланИсходный список
  1. Подготовить структуру Контент
  2. Согласовать дизайн Дизайн
    1. Проверить мобильную версию Подзадача
ГотовоПустой список
    План
    
		
    Готово
    
	
    
	
    

	

	
    
		
    
	
    
		HTML
		
	
    
	
    <div class="vg-nestable" data-vg-toggle="nestable" data-group="board" data-connect="true">
  <ol class="vg-nestable-list">...</ol>
</div>

<div class="vg-nestable" data-vg-toggle="nestable" data-group="board" data-connect="true" data-emptytext="Перетащите сюда">
  <ol class="vg-nestable-list"></ol>
</div>
    

    
		
    
	
    
		JavaScript
		
	
    
	
    // Дополнительная инициализация не требуется: используется Data API.
// Одинаковые group и connect связывают оба списка.
    

    
		
    
	
    
		CSS
		
	
    
	
    .board-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}