title: jQuery UI nested sortable list
body: <p>I'm working on a Script to easy sort nested lists with jQuery UI.
  It works all fine, but there's one little "bug" that I couldn't erase.</p>
  
  <p>Use jsfiddle (<a href="http://jsfiddle.net/fewTp/">http://jsfiddle.net/fewTp/</a>) and the instructions below to get see whats happening :)</p>
  
  <p>The "bug" happens if you drag a sub-point one level deeper (drag "submenu2" a bit to the right and drop it, so it is a level deeper) and than try to drag it back again.
  As you can see, in the moment that you drag "submenu2" a bit to the left, "submenu1" will jump down. </p>
  
  <p>If you don't like jsfiddle here's my code for you:</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;ul&gt;
      &lt;li&gt;
          &lt;span&gt;&lt;p&gt;menu 1&lt;/p&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;span&gt;&lt;p&gt;submenu 1&lt;/p&gt;
                          &lt;ul&gt;&lt;/ul&gt;
                      &lt;/span&gt; 
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;span&gt;&lt;p&gt;submenu 2&lt;/p&gt;
                          &lt;ul&gt;&lt;/ul&gt;
                      &lt;/span&gt; 
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span&gt;&lt;p&gt;menu 2&lt;/p&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;span&gt;&lt;p&gt;submenu 1&lt;/p&gt;
                          &lt;ul&gt;&lt;/ul&gt;
                      &lt;/span&gt; 
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;span&gt;&lt;p&gt;submenu 2&lt;/p&gt;
                          &lt;ul&gt;&lt;/ul&gt;
                      &lt;/span&gt; 
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    * {
      font-family: Arial;
  }
  span {
      cursor: move;
      display: inline-block;
      margin: 0 10px 10px 10px;
     /* margin-bottom: -62px;*/
  }
  p {
      margin: 0;
      border-radius: 5px;
      border: 1px solid #793D00;
      padding: 10px;
      height: 20px;
      width: 180px;
  }
  .highlighter {
      text-align: center;
      cursor: move;
      border-radius: 5px;
      width: 200px;
      height: 40px;
      display: inline-block;
      margin: 0px 10px 14px 10px;
      padding: 0;
      border: 1px dashed #000;
      background:#FFFF91;
  }
  ul {
      float: left;
      list-style-type: none;
  }
  li {
      position: relative;
      /*z-index: 6;*/
  }
  ul li {
      float: left;
      display: block;
      padding: 0 40px;
  }
  li ul {
      float: none;
      margin: 0;
  }
  ul li ul li {
      float: none;
      margin: 0;
      padding: 0px;
  }
  li ul.ui-sortable {
      min-height: 60px;
      /*border: 1px solid #f00;*/
      position: relative;
      /*z-index: 5;*/
      margin-top: 10px;
      margin-left: 40px;
      padding: 10px 0 0 0;
  }
  .ui-sortable-helper {
      padding: 0;
      margin: 0 10px 10px 10px;
  }
  ul.no-child {
      margin-bottom: -73px;   
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>    $('ul').disableSelection().sortable({
      connectWith: "ul",
      tolerance: "pointer",
      cursorAt: {
          left: 40,
          top: 20
      },
      cursor: "move",
      opacity: 0.5,
      placeholder: "highlighter",
      helper: "clone",
      revert: 200,
      start: function(e, ui) { 
          if(ui.item.parent().hasClass("children-1")){
              ui.item.parent("ul").removeClass("child").addClass("no-child");
          }
      },
      stop: function(e, ui) { 
          mkUl();
      }
  });
  
  function mkUl(){ 
      $("ul").each(function(){
          $(this).removeAttr("class");
  
          var ulLevel = $(this).parents('ul').length+1;
          $(this).addClass("ui-sortable no-child level_"+ulLevel);
          var childC = $(this).children("li").size(); 
          $(this).has("li").removeClass("no-child").addClass("child children-"+childC);
  
          $(this).children("li:first").addClass("first");
          $(this).children("li:last").addClass("last");
      }); 
  }
  
  $(document).ready(function(){
      mkUl();
  });
  </code></pre>