我有一个可以按顺序拖动和排序的图像网格列表。您可以通过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()
});
});