How to Drag item that spans multiple grid positions?

[hgoona]

I'm wanting to dnd an object to a gridded snapping environment, where the object may span multiple grids. How could I go about this? I noticed the Scrabble example repl but my scenario might almost be more comparable to the game of Battleships.

My situation is similar, however each tile may be multiple squares wide eg. 1x4 or even 3x5 etc. In this situation I want the drop preview to also reflect this same number of tiles for the preview shadow to be displayed. How to achieve this?

[isaacHagoel]

So the drop positions are overlapping?

…

On Mon, Sep 1, 2025, 02:35 HirangaG ***@***.***> wrote: *hgoona* created an issue (isaacHagoel/svelte-dnd-action#664) <#664> I'm wanting to dnd an object to a gridded snapping environment, where the object may span multiple grids. How could I go about this? I noticed the Scrabble example repl but my scenario might almost be more comparable to the game of Battleships. My situation is similar, however each tile may be multiple squares wide eg. 1x4 or even 3x5 etc. In this situation I want the drop preview to also reflect this same number of tiles for the preview shadow to be displayed. How to achieve this? — Reply to this email directly, view it on GitHub <#664>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC3Y3BMNC2A6QRMFT7D3QMP6XAVCNFSM6AAAAACFIMYHKOVHI2DSMVQWIX3LMV43ASLTON2WKOZTGM3TANBXGUZTMMY> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[hgoona]

@isaacHagoel No - I'd want to retain the collision/overlap detection, eg one tile can't cross/overlap with another, regardless of size...

[isaacHagoel]

It would help if you can add some basic visual/drawing. I want to be sure I understand what you mean

…

On Mon, Sep 1, 2025, 08:37 HirangaG ***@***.***> wrote: *hgoona* left a comment (isaacHagoel/svelte-dnd-action#664) <#664 (comment)> @isaacHagoel <https://github.com/isaacHagoel> No - I'd want to retain the collision/overlap detection, eg one tile can't cross/overlap with another, regardless of size... — Reply to this email directly, view it on GitHub <#664 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC6P7D6ETVWHDDP34P33QN2MBAVCNFSM6AAAAACFIMYHKOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTENBQGQ3DANRYGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[hgoona]

@isaacHagoel sure! I just found this picture online - I'm trying to do something like this effectively:

The item can be larger than 1x1 , eg 3x6 size.
Items can't sit on top of each other / can't collide.
In my case I want to be able to stretch the item size after placement, using some stretch handles I guess.
And items can be moved after placement as well, so collision detection needs to work even after stretching the items.
Does that pic help? Ignore those numbers on the x, y axes.

[isaacHagoel]

this helps but i recommend not using this lib (or any lib) for this but rather implementing from scratch (shouldn't be too hard cause you don't need it to be generic).
doing this with svelte-dnd-action would require serious hacks and might not even be possible.

[hgoona]

@isaacHagoel I've just tried some other ways trying to use things like GSAP but having difficulty. Not sure if my approach is at all correct - I'm a bit green regarding draggables. Just dbl checking with you - from your comments above, is getting your library to work with a position array something that is very hard to do? Is that where the issue lies?

I'm presuming every draggable item currently only tracks/reacts to a singular position, eg [ 0,2 ] ?
But what I'm trying to achieve is in essence the tracking of a top left and bottom right position, eg. { tl: [ 0,2], br: [3,4] }

Is that how you would approach this? What factors would make this hectic using your library? Im just struggling to work with GSAP and SvelteKit - it seems like gsap is made more for DOM frameworks...

[isaacHagoel]

I wouldn't use any library, just implement it from scratch. Maybe cursor can just oneshot a basic version of what you need and then fix it and make it good

…

On Fri, Sep 5, 2025, 12:44 HirangaG ***@***.***> wrote: *hgoona* left a comment (isaacHagoel/svelte-dnd-action#664) <#664 (comment)> @isaacHagoel <https://github.com/isaacHagoel> I've just tried some other ways trying to use things like GSAP but having difficulty. Not sure if my approach is at all correct - I'm a bit green regarding draggables. Just dbl checking with you - from your comments above, is getting your library to work with a position array something that is *very* hard to do? Is that where the issue lies? I'm presuming every draggable item currently only tracks/reacts to a singular position, eg [ 0,2 ] ? But what I'm trying to achieve is in essence the tracking of a top left and bottom right position, eg. { tl: [ 0,2], br: [3,4] } Is that how you would approach this? What factors would make this hectic using your library? Im just struggling to work with GSAP and SvelteKit - it seems like gsap is made more for DOM frameworks... — Reply to this email directly, view it on GitHub <#664 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC3WWOP2BHSSA4UPXQL3RD2ILAVCNFSM6AAAAACFIMYHKOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTENJWHA4TQNBUGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[hgoona]

@isaacHagoel just reporting back in: I've now done a few rounds of attempting your recommendation building from scratch with Claude - it is properly failing. I need it to also be compatible with touch, and I realised your supports that too...

I'm now wondering about an attempt to extend your lib instead, maybe in a few days. Does yours track the position of the dropItem, like a coordinate? Or does it only track an index, eg a single number index in an array? If so, where is the type for it declared? I had a glance in the repo but it wasn't obvious to me which type i need to be concerned about in this regard.

[isaacHagoel]

which timezone you're in? maybe i can jump on a quick zoom call with you at one point and unblock you (I am in AEST)

[shrinidhihegde0302]

This above issue is like using svelte-dnd inside table like structure where every cell acts as dnd zone?
and you are suggesting to build from scratch is that right?