Pack when you drag, then place the item vertically in a sortable grid, vertical alignment breaks

Question

I had a problem trying to use packaging and draggabilly to create a sortable grid of elements.

I also tried jquery ui dragabble and the problem remained. When I drag an element, I can break the vertical alignment so that the element “snapped” part down the line. It also upsets the elements.

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

If you drag an item horizontally, it locks in place and aligns in order. If you drag vertically, you may fall out of alignment; it will not snap into place correctly. The position of the last positions also changes.

Can anyone suggest what I can do wrong?

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

For some reason, the "top" css value for the discarded item and the item below are set dynamically with the wrong values.

Answer 1

I know this late, but I myself was looking for this problem, so maybe someone will need it.

The package composition system does not work the way we need batch processing to be done while dragging and dropping, so we need a workaround. I was able to get around the vertical alignment problem for packet relay packets on "dragItemPositioned", for example:

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