title: Stack images on top of each other when dragging
body: <p>I have a grid list of images that can be dragged and sorted in order. You select and drag multiple items by CTRL+CLICK. The problem is that it becomes clunky when dragging 3+ images. Is there a way of stacking these images when dragging?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;img src="http://via.placeholder.com/100x100"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://via.placeholder.com/100x100"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://via.placeholder.com/100x100"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://via.placeholder.com/100x100"/&gt;&lt;/li&gt;
      // more li items
  &lt;/ul&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>jQuery(function($){
     $('ul').multisortable();
  });
  </code></pre>
  
  <p>Demo: <a href="http://jsfiddle.net/KWeMM/679/" rel="nofollow noreferrer">http://jsfiddle.net/KWeMM/679/</a></p>
  
  <p><strong>Update:</strong></p>
  
  <p>I've updated the raw plugin so that it stacks the images. The problem is it won't place them properly when dropping. It's clunky.</p>
  
  <p>Demo: <a href="http://jsfiddle.net/50fd0u8h/3/" rel="nofollow noreferrer">http://jsfiddle.net/50fd0u8h/3/</a></p>
  
  <pre><code>        var masterEle = $('.' + settings.selectedClass).eq(0).position();
              masterLeft = masterEle.left,
              masterTop = masterEle.top;
  
          var siblingTop = masterTop, siblingLeft = masterLeft;
  
          // fix to keep compatibility using prototype.js and jquery together
          $.fn.reverse = Array.prototype._reverse || Array.prototype.reverse
  
          var height = 0;
          $('.' + settings.selectedClass, parent).filter(function() {
              return $(this).data('i') &lt; myIndex || $(this).data('i') &gt; myIndex ;
          }).reverse().each(function() {
              height = $(this).outerHeight();
              siblingTop = siblingTop+5;
              siblingLeft = siblingLeft+5;
              zIndexSet = zIndexSet-5;
              $(this).css({
                  left: siblingLeft,
                  top: siblingTop,
                  position: 'absolute',
                  zIndex: zIndexSet,
                  width: ui.item.width()
              });
          });
  </code></pre>