title: jQuery UI sortable/draggable nesting example
body: <p>I've been playing with jQuery UI sortable and draggable and I'm looking for a way to nest list items (only first and second level) depending on where they are dropped on the list.</p>
  
  <p>Simple JSFiddle example of what I am trying to do: <a href="http://jsfiddle.net/picitelli/XZ4Tw/" rel="noreferrer">http://jsfiddle.net/picitelli/XZ4Tw/</a></p>
  
  <pre><code>$(".items").sortable({
      connectWith: ".items",
      placeholder: "placeholder",
      update: function(event, ui) {
          // update
      },
      sort: function(event, ui) {
          // sort
      }
  });
  $(".item").droppable({
      accept: ".item",
      hoverClass: "dragHover",
      drop: function( event, ui ) {
          console.log('drop');
          if (ui.position.left &gt;= 20) {
              $(this).removeClass("first-level");
              $(this).addClass("second-level");
          } else {
              $(this).removeClass("second-level");
              $(this).addClass("first-level");
          }
      },
      over: function( event, ui ) {
          // over
      },
      activate: function( event, ui ) {
          // activate
      }
  });
  </code></pre>
  
  <p>I want to be able to drag a list item and drop it before/after another list item, and depending on how far I am from the left (x) of the list, and how far I am from the bottom/top (y) of the list item I am dropping near, it will make that list item either a first and second level item. For instance, if I have a list item dragged on top of another, and I am closer to the bottom of that list item that I am hovering over, than if I was farther away from the bottom, if I drop it it will snap to the bottom of said list item and be a first-level item. If I was to move that list item further away and drop it, it would snap to the bottom and be a second-level item. The placeholder would update as well, invoking a class, just on hover, to show that the dropped list item would be either first or second level before it is actually dropped.</p>
  
  <p>Per the fiddle above, in the drop method, I am checking to see how far the dragged list item is from the left. If it is greater than or equal to 20px, I am adding a "second-level" class that indents the list item. If it is less than 20px, I am adding a "first-level" class that keeps the list item flush left. Just for the left (x) calculation, this is working but it is not applying the classes to the dropped list item, it applies them to the list item that it has "jumped" over. Am I not invoking the correct method to perform this? Also, how would I go about performing such a calculation to determine where the list item would snap depending on how far (y) it is from the list item I am hovering over?</p>
  
  <p>Any feedback/direction would be greatly appreciated. </p>