拖动时将图像堆叠在一起

Question

我有一个可以按顺序拖动和排序的图像网格列表。您可以通过CTRL + CLICK选择并拖动多个项目。问题是拖动3个以上的图像时变得笨拙。有没有办法在拖动时堆叠这些图像？

HTML

<ul>
    <li><img src="http://via.placeholder.com/100x100"/></li>
    <li><img src="http://via.placeholder.com/100x100"/></li>
    <li><img src="http://via.placeholder.com/100x100"/></li>
    <li><img src="http://via.placeholder.com/100x100"/></li>
    // more li items
</ul>

JS

jQuery(function($){
   $('ul').multisortable();
});

演示：http://jsfiddle.net/KWeMM/679/

更新

我已经更新了原始插件，以便堆叠图像。问题是它在放下时不会正确放置它们。它很笨重。

演示：http://jsfiddle.net/50fd0u8h/3/

        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') < myIndex || $(this).data('i') > 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()
            });
        });