CODEWITHSUNDEEP
jqueryjquery-masonryjquery-ui-sortable
frgtv10
frgtv10

Reputation: 5440

jQuery: Masonry + Sortable reorder grid

I'm using Masonry + jQuery Sortable to redesign a 3x3 grid, which you can see below.

enter image description here

    $('#container').masonry({
        itemSelector: '.element',
        isResizable: true,
        columnWidth: 100
    })

The user is able to sort the divs (1-4) and give them a new order. Dragging the div 1 to the position top right will reorder the grid, but not as expected. After sorting it new, it will look like this:

enter image description here

I thought with adding event stop/start/change to sortable this way...

change: function(event, ui) {
               ui.item.parent().masonry('reload');
        }

...will reorder the grid in the way 2, 3, 4 on top, and below div 1. But it looks like the screenshot above.

Can somebody help me to do this expected behaviour? Am I using Masonry wrong?

EDIT: After reload the DOM returns div 2, 3, 1, 4. I expected 2, 3, 4, 1.

TIA frgtv10

Upvotes: 1

Views: 1364

Answers (1)

bingjie2680
bingjie2680

Reputation: 7773

I think, im not totally sure, the masonry orders element based on the order of DOM element. when users drag an element around, do you reorder the DOM?? if not, when masonry reloads, the order still reverse the one before.

Upvotes: 1

Related Questions