我正在研究网上商店系统中图像管理器的概念。部分要求是,在产品级别,您可以上传该产品的图像,并通过拖动(排序)图像,您可以选择图像在产品页面上显示的顺序。
我的问题是,我对正在拖动的元素使用占位符,并且该元素正在推送到图像下一行/行上的元素。
可排序代码:
$('.product-image-manager').sortable({
handle: '.fa-arrows',
helper: 'clone',
items: '> .image-container',
placeholder: 'image-placeholder',
start: function(event, ui) {
ui.placeholder.height(ui.item.height());
ui.placeholder.html('<div class="inner-placeholder"></div>');
}
});
<强> Full example
最佳答案
您只需更改此:
.product-image-manager > .image-container {
padding: 8px;
float: left;
vertical-align: top;
}
对此:
.product-image-manager > .image-container {
padding: 8px;
display: inline-block;
vertical-align: top;
}
关于jQuery UI sortable 的占位符将元素推到其下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39332861/