Draggabilly drop target with Packery is always the first item's size

[qJake]

When using Draggabilly with Packery, the drop grid is always set to the first item's size, even if that item is a "2x" or "3x" item.

I don't see anywhere where I can define an explicit grid size (which is what I basically want to do).

I have also tried creating a "fake" first element set to the correct grid size, initializing Packery and Draggabilly, and then deleting that element - but that doesn't work, either.

Reproduce pen: https://codepen.io/qJake/pen/ZEzaQbQ

Pen with the correct behavior - exactly the same, except lines 3 and 4 are swapped: https://codepen.io/qJake/pen/pozdgbJ

My goal is to have an explicit grid of size X by Y, regardless of the first elemnet. How can I achieve this?

Posting to both Draggabilly and Packery repos since I'm not sure which is the culprit here - Draggabilly handles dragging, but the drop target says packery-drop-placeholder. Please close whichever repo issue is not correct, but please don't close both! 😁 Ref: https://github.com/desandro/draggabilly/issues/206

[richard-ob]

If you know that you want your grid unit widths to be a fixed size, which looks like 50px from your code, then just change your columnWidth setting to: columnWidth: 50 As I understand it, because you are using a selector (.tile) as the columnWidth, its selecting the first element with that class applied and using its width (which is 100px). It doesn't use the actual class you provide.

[qJake]

@richard-ob That does appear to work - I must have been testing other things at the same time because I swear setting it up like that didn't work the first time I tried it - but I was able to modify the codepen above and get it to work.

I'll try this later tonight and close the issue(s) if it fixes the problem. Thanks for the assistance!

[qJake]

Yes - that was the issue. I think I had tried it with 'px' at the end which was causing it to not work - just passing in the number by itself seems to work!

Thanks!