jQuery UI sortable 的占位符将元素推送到它下面

Question

我正在为网上商店系统中的图像管理器设计一个概念。部分要求是，在产品级别，您可以上传该产品的图像，并通过拖动（排序）图像，您可以选择图像在产品页面上显示的顺序。

我的问题是我为正在拖动的元素使用占位符，并且该元素正在推送到下一行/下一行图像的元素。

可排序代码：

$('.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

Answer 1

你只需要改变这个：

.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;
}