Nestable lists

Nestable lists Plugin

Drag & drop nestable

  1. Item 1
  2. Item 2
    1. Item 3
    2. Item 4
    3. Item 5
      1. Item 6
      2. Item 7
      3. Item 8
<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>
			</ol>
		</li>
	</ol>
</div>

Draggable Handles

  1. Drag
    Item 13
  2. Drag
    Item 14
  3. Drag
    Item 15
    1. Drag
      Item 16
    2. Drag
      Item 17
    3. Drag
      Item 18
<div class="dd" id="nestable2">
	<ol class="dd-list">
		<li class="dd-item dd3-item" data-id="13">
			<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 13</div>
		</li>
		<li class="dd-item dd3-item" data-id="14">
			<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 14</div>
		</li>
		<li class="dd-item dd3-item" data-id="15">
			<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 15</div>
			<ol class="dd-list">
				<li class="dd-item dd3-item" data-id="16">
					<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 16</div>
				</li>
				<li class="dd-item dd3-item" data-id="17">
					<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 17</div>
				</li>
				<li class="dd-item dd3-item" data-id="18">
					<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 18</div>
				</li>
			</ol>
		</li>
	</ol>
</div>