Images grid gone after dragging

[rochellecanale]

Hi there,

There are some instances where the image being move disappears. Please refer to the screen capture. https://cbo.d.pr/y7nRvO

Based on my investigation the image grid stays at the bottom and when you drag the grid beside it will show again the missing Image grid.

[desandro]

I'm sorry to see you're having trouble with Packery. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

[vyskoczilova]

Hi, I have experienced the very same trouble. I tried to append an element and add draggable to it. I have found this issue #460 here on Github. Went through it and ended up on this pen https://codepen.io/robertwong68/pen/jLYMEJ - you can see the bug with moving the added image out of the grid. Could you help? I have replicated the very same situation with my use case.

[vyskoczilova]

Found this in console:

packery.pkgd.min.js:12 Uncaught TypeError: Cannot read property 'x' of undefined
    at HTMLDivElement.dragMove (packery.pkgd.min.js:12)
    at HTMLDivElement.dispatch (jquery.js?ver=1.12.4:3)
    at HTMLDivElement.r.handle (jquery.js?ver=1.12.4:3)
    at Object.trigger (jquery.js?ver=1.12.4:3)
    at Object.jQuery.event.trigger (jquery-migrate.js?ver=1.4.1:633)
    at HTMLDivElement.<anonymous> (jquery.js?ver=1.12.4:3)
    at Function.each (jquery.js?ver=1.12.4:2)
    at jQuery.fn.init.each (jquery.js?ver=1.12.4:2)
    at jQuery.fn.init.trigger (jquery.js?ver=1.12.4:3)
    at i.o.dispatchJQueryEvent (draggabilly.pkgd.min.js:8)

[desandro]

@vyskoczilova Thanks for reporting this issue. Looks like the bug was with how Draggabilly was working with Packery. Packery's method requires the Draggabilly instance. Changing this code fixed it:

        $items.draggabilly();
        var draggie = $items.data('draggabilly');
        $grid.packery( 'bindDraggabillyEvents', draggie );

See demo https://codepen.io/desandro/pen/c25449beb96d72621a831a8151c30c49/