title: Nest jQuery UI sortables
body: <p>Is there a way to have nested jQuery sortables? As in nested containers, not in the sense of a nested list.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  $('.container').sortable({
      connectWith: '.container'
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ExLqv/2/" rel="noreferrer">http://jsfiddle.net/ExLqv/2/</a></p>
  
  <p>That example pretty much works, but when I drop the nested container I get an error:</p>
  
  <pre><code>Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong. 
  </code></pre>
  
  <p>I assume it is because when dragging a <code>container</code> it is positioned under the mouse, so when I drop it, it trys to put it inside itself.</p>
  
  <p>I have a work around, although not ideal so the question still stands.</p>
  
  <pre><code>$('.container').sortable({
      connectWith: '.container:not(.ui-sortable-helper)',
      tolerance: "pointer",
      cursorAt: { left: -50 }
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ExLqv/8/" rel="noreferrer">http://jsfiddle.net/ExLqv/8/</a></p>