Nestable

Create nestable lists that can be sorted by drag and drop.

The Nestable allows you to sort items through drag and drop. This is great, if you want to organize different categories or menu items in administration areas, for example.


Usage

A nestable list consists of the list itself, its items and the nestable panel.

Class/Data attribute Description
.f-nestable Add this class to a <ul> element to define the component.
.f-nestable-item Add this class to each <li> element the list item.
.f-nestable-panel Add this class to a <div> element inside the <li> element to style the item.

NOTE To enable the necessary JavaScript, just add the data-f-nestable attribute.

Example

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Markup

<ul class="f-nestable" data-f-nestable>
	<li class="f-nestable-item">
		<div class="f-nestable-panel"> ... </div>
	</li>
</ul>

Nestable handle

By default, the entire nestable element can be used for drag and drop sorting. To create a handle which will be used instead, just add the {handleClass:'f-nestable-handle'} option to the data attribute and add the handle class to the element that you want to use as a handle.

Example

  • drag_handle Item 1
  • drag_handle Item 2
  • drag_handle Item 3
  • drag_handle Item 4

NOTE In this example we used the .f-icon-bars class from the Icon component to style the handle.

Markup

<ul class="f-nestable" data-f-nestable="{handleClass:'f-nestable-handle'}">
	<li class="f-nestable-item">
		<div class="f-nestable-panel">
			<div class="f-nestable-handle"></div>
			...
		</div>
	</li>
</ul>

Nestable toggle

By default, the entire nestable element can be used for drag and drop sorting. To create a handle which will be used instead, just add the .f-nestable-toggle class and the data-nestable-action="toggle" attribute to a <div> element inside the nestable panel.

Example

  • remove
    Item 1
  • remove
    Item 2
  • remove
    Item 3
  • remove
    Item 4

Markup

<ul class="f-nestable" data-f-nestable">
	<li class="f-nestable-item">
		<div class="f-nestable-panel">
			<div class="f-nestable-toggle" data-nestable-action="toggle"></div>
			...
		</div>
	</li>
</ul>

Multiple lists

To be able to sort items from one list to another, you can group them by adding the data-f-nestable="{group:'GROUP-NAME'}" attribute to each list.

Example

First list

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Second list

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Markup

<ul class="f-nestable" data-f-nestable="{group:'my-group'}">...</ul>
<ul class="f-nestable" data-f-nestable="{group:'my-group'}">...</ul>

Disable nesting

To disable nesting of list items, just add the data-f-nestable="{maxDepth:1}" attribute. You can also use this data attribute to determine to what depth nesting is possible.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Markup

<ul class="f-nestable" data-f-nestable="{maxDepth:1}">...</ul>

JavaScript options

This is an example of how to set options via attribute:

<ul data-f-nestable="{maxDepth:0, group:'widgets'}">...
Option Possible value Default Description
group string false List group
maxDepth integer 10 Max nesting level
threshold integer 20 Pixel threshold before starting to drag
listBaseClass string f-nestable List base class
listClass string f-nestable-list List class
listitemClass string f-nestable-list-item List item class
dragClass string f-nestable-list-dragged Class added to dragged list
movingClass string f-nestable-moving Class added to <html> when moving
handleClass string f-nestable-handle Class for drag handle
collapsedClass string f-nestable-collapsed Class for collapsed items
placeholderClass string f-nestable-placeholder Class for placeholder of currently dragged element
noDragClass string f-nestable-nodrag Elements with this class will not trigger dragging. Useful when having the complete item draggable and not just the handle.
noChildrenClass string f-nestable-nochildren Elements with this class will not allow children. Useful for bottom-level items.
emptyClass string f-nestable-empty Class for empty lists
idlethreshold integer 10 delay threshold for moving items

Init element manually

let nestable = FatKit.nestable(element, { /* options */ });

Events

Name Parameter Description
start.f.nestable event, nestable object On nestable drag start
move.f.nestable event, nestable object On nestable move item
stop.f.nestable event, nestable object On nestable stop dragging
change.f.nestable event, sortable object, dragged element, action On nestable change item