title: How to make a sortable behave like a droppable when moving other sortable items over it
body: <p>I have a grid containing both icons and groups (folders). I want both the icons and the groups to be sortable, but with the restraint that the groups don't move out of the way, but stay in place and basically turn into stationary drop targets for the icons. Moving a group within the larger sortable should still be possible, this time the other groups should act like sortables and move out of the way.</p>
  
  <pre><code>[Group 1] [Group 2] [Icon  1] [Icon  2]
  [Group 3] [Icon  3] [Icon  4]
  </code></pre>
  
  <p>I have partially achieved the desired result by making all the groups part of one sortable, and all icons part of another, containing them both within the same parent container and connecting the groups sortable with the icons sortable, but not the other way around.</p>
  
  <p>This allows me to keep the group icons static when dragging an icon, while the icons are still being sorted. So far so good, but I can't find a way to turn the groups into drop targets for the icons. When dragging an icon over a group, I want to display a hover-class and capture which group the icon was over if dropped. I have tried making the groups a droppable but it doesn't respond to sortables, and if I try to make the icons a draggable then it overrides all the sortable behavior. </p>
  
  <p>The other issue with my code is that the groups can move icons around, but not fellow groups. What I need are groups that stay still when an icon is moved around, but move around in the sortable if another group is being dragged.</p>
  
  <p>Note that I don't really need a nested sortable because all I want is dropping icons over a group, they don't need to be actually added there.</p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='groups'&gt;
          &lt;div class='item group'&gt;Group 1&lt;/div&gt;
          &lt;div class='item group'&gt;Group 2&lt;/div&gt;
          &lt;div class='item icon'&gt;Icon 1&lt;/div&gt;
          &lt;div class='item icon'&gt;Icon 2&lt;/div&gt;
          &lt;div class='item group'&gt;Group 3&lt;/div&gt;
          &lt;div class='item icon'&gt;Icon 3&lt;/div&gt;
          &lt;div class='item icon'&gt;Icon 4&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  $('.icons').sortable({
      items: '.icon',
      containment: '.container'  
  }).disableSelection();
  $('.groups').sortable({
      items: '.group',
      connectWith: '.container',
      containment: '.container'
  }).disableSelection();
  </code></pre>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/illuminaut/vtxfsgv2/" rel="nofollow">http://jsfiddle.net/illuminaut/vtxfsgv2/</a></p>
  
  <p><strong>Update:</strong>  I was able to mimic droppable behavior by looking at <code>document.elementFromPoint(e.clientX, e.clientY)</code> inside the sort event handler of the sortable containing the icons. I set <code>pointer-events: none</code> on <code>.ui-sortable-helper</code> to be able to peek under the currently dragged item and if the dom element is a group I act on it.</p>
  
  <p>Here's an updated fiddle with it: <a href="http://jsfiddle.net/illuminaut/vtxfsgv2/4/" rel="nofollow">http://jsfiddle.net/illuminaut/vtxfsgv2/4/</a></p>
  
  <p>However, I'm not sure how robust this method is and I don't think this even works with touch. I'd be probably better off using an actual droppable so I'm leaving this question open. Also, the sortable for the groups is still not sorting when another group is being moved.</p>