keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Typography

Nestable.

Nestable is an experimental example and not under active development. If it suits your requirements feel free to expand upon it!. Click here

Basic Nestable

Drag & drop hierarchical list with mouse and touch compatibility.

  1. Item 1
  2. Item 2
    1. Item 3
    2. Item 4
    3. Item 5
      1. Item 6
      2. Item 7
      3. Item 8
    4. Item 9
    5. Item 10
  3. Item 11
  4. Item 12

<div class="nestable">
	<div class="dd" id="nestable">
		<ol class="dd-list">
			<li class="dd-item" data-id="1">
				<div class="dd-handle">Item 1</div>
			</li>
			<li class="dd-item" data-id="2">
				<div class="dd-handle">Item 2</div>
				<ol class="dd-list">
					<li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>
					<li class="dd-item" data-id="4"><div class="dd-handle">Item 4</div></li>
					<li class="dd-item" data-id="5">
						<div class="dd-handle">Item 5</div>
						<ol class="dd-list">
							<li class="dd-item" data-id="6"><div class="dd-handle">Item 6</div></li>
							<li class="dd-item" data-id="7"><div class="dd-handle">Item 7</div></li>
							<li class="dd-item" data-id="8"><div class="dd-handle">Item 8</div></li>
						</ol>
					</li>
					<li class="dd-item" data-id="9"><div class="dd-handle">Item 9</div></li>
					<li class="dd-item" data-id="10"><div class="dd-handle">Item 10</div></li>
				</ol>
			</li>
			<li class="dd-item" data-id="11">
				<div class="dd-handle">Item 11</div>
			</li>
			<li class="dd-item" data-id="12">
				<div class="dd-handle">Item 12</div>
			</li>
		</ol>
	</div>
</div>