Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<ul class="sortable">
  <li class="menu-item"> Parent 1 </li>
  <li class="menu-item"> Parent 2
    <ul>
      <li class="menu-item"> Sub </li>
      <li class="menu-item"> Sub 2 </li>
    </ul>
  </li>
</ul>

CSS

ul {
        position:relative;
    }
    
    ul, li {
        margin:0;
        padding:0;
        list-style:none;
    }
    
    li {
        width:200px;
        margin:1px;
        padding:5px;
        border:solid 1px #AAA;
        background-color:#EEE;
        
        position:relative;
    }
    
    ul li ul {
        position:absolute;
        top:-1px;
        left:212px;
        padding-left:1px;
    }
    
    .ph {
        background-color:#CCC;
    }

JavaScript

$(".sortable").sortable({
            forcePlaceholderSize: true,
            placeholder: 'ph',
            opacity: 0.8,
            items: 'li.menu-item'
        });
        $(".sortable").disableSelection();