http://dbushell.github.io/Nestable/ - drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin)

Basic

  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="dd">
  <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>

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">
  <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>
Online
Felecia Castro
Felecia Castro
Lorem status
Max Brooks
Max Brooks
Lorem status
Patsy Griffin
Patsy Griffin
Lorem status
Chloe Morgan
Chloe Morgan
Lorem status
Vernon Garrett
Vernon Garrett
Lorem status
Greg Mcdonalid
Greg Mcdonalid
Lorem status
Christian Jackson
Christian Jackson
Lorem status
Offline
Willie Kelly
Willie Kelly
Lorem status
Jenny Phillips
Jenny Phillips
Lorem status
Darren Cunningham
Darren Cunningham
Lorem status
Sandra Cole
Sandra Cole
Lorem status
Monday, Feb 23, 8:23 pm
Hi, Felicia.
How are you?
John Doe Hi! I am good!
Glad to see you :)
This long text is intended to show how the chat will display it.
John Doe Also, we will send the longest word to show how it will fit in the chat window: Pneumonoultramicroscopicsilicovolcanoconiosis
Friday, Mar 10, 5:07 pm
Hi again!
John Doe Hi! Glad to see you.
I want to add you in my Facebook.
Can you give me your page?
John Doe I do not use Facebook. But you can follow me in Twitter.
It's good idea!
John Doe You can find me here - https://twitter.com/nkdevv