CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortableplaceholder
Legarndary
Legarndary

Reputation: 967

jQuery UI sortable's placeholder pushes elements under it

I'm working on a concept for a image manager in a webshop system. Part of the requirements is that on product level you can upload images for that product and by dragging (sorting) the images you can choose the order in which the images are displayed on the product page.

My problem is that I use a placeholder for the element that is being dragged, and that element is pushing to the elements on the next line/row of images.

Sortable code:

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

Upvotes: 2

Views: 732

Answers (1)

koosa
koosa

Reputation: 3040

You just need to change this:

.product-image-manager > .image-container {
    padding: 8px;
    float: left;
    vertical-align: top;
}

To this:

.product-image-manager > .image-container {
    padding: 8px;
    display: inline-block;
    vertical-align: top;
}

Upvotes: 1

Related Questions