Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<link href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script><link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div class="switch-container">
<ul class="nested_with_switc" style="list-style-type: none">
  <li style="list-style-type: none"><div>Item 1</div>
    <ul>
      <li><div>Subitem 1.1</div></li>
      <li style="list-style-type: none"><div></div></li>
      <li><div>Subitem 1.2</div></li>
      <li><div>Subitem 1.3</div></li>
    </ul>
  </li>
  <li><div>Item 2</div>
   <ul>
      
    </ul>
  </li>
  <li><div>Item 3</div>
    <ul>
      <li><div>Subitem 3.1</div></li>
      <li><div>Subitem 3.2</div></li>
      <li><div>Subitem 3.3</div></li>
    </ul>
  </li>
</ul>
</div>
 
.placeholder {
  outline: 1px solid black;
}
 
//var oldContainer;
$("ul.nested_with_switc").sortable({
  cursor: 'move',
  toleranceElement : '> div',
  item: 'li',
  connectWith: 'ul.nested_with_switc',
  handle: 'div',
  placeholder: 'placeholder',
  
});
$("ul.nested_with_switc > li > ul").sortable({
  cursor: 'move',
  toleranceElement : '> div',
  item: 'li',
  handle: 'div',
  connectWith: 'ul.nested_with_switc > li > ul',
  placeholder: 'placeholder',
  //remove: function (event, ui) {
  //  console.log("remove");
  //},
  //over: function (event, ui) {
  //  console.log("over inner list");
  //}
  update: function (event, ui) {
   
  }
});
/* */
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers