Packery when drag then drop an item vertically in a sortable grid, vertical alignment breaks

Question

I'm having an issue when trying to use packery and draggabilly to create a sortable grid of items.

I've also tried jquery ui dragabble and the issue remains. When I drag and drop the item it is possible to break the vertical alignment so the item "snaps" part way down the row. This also breaks the ordering of the items.

http://jsfiddle.net/foobass/sasrx654/

If you drag an item horizontally, it snaps into place and aligns fine. If you drag vertically you can drop out of alignment, it doesn't snap into place correctly. Also the last items position is changed.

Can anyone suggest what I might be doing wrong?

   var container = document.querySelector('#container');

   var packery = new Packery(container, {
        rowHeight: '.module-sizer',
        itemSelector: '.module',
        columnWidth: '.module-sizer',
        isInitLayout: true,
        isResizeBound: true
   });

It seems for some reason the "top" css value of the dropped item and the item below are being set with incorrect values dynamically.

Answer 1

I know it's late but I was searching for this issue myself, so maybe someone will need this.

Packery's layout system doesn't work the way we need packery to behave on vertical drag, so we need a workaround. I've managed to work around the vertical align issue to relayout packery on 'dragItemPositioned', like this;

packery.on( 'dragItemPositioned', function( event, draggedItem ) {
    app.tiles.settings.packeryEl.packery();
});