Drag and Drop with Draggable, keeping dropped items aligned with content on viewport resize

[jamesstephensaul]

Hi there,

 

I'm working on a drag and drop interface where dropped elements align to areas on a grid.  

 

My issue is that currently when the viewport is resized, the dropped elements become misaligned with the grid area.    I've experimented with adding a ResizeObserver to trigger a change when the screen is resized but I've not yet been able to figure out how to update the dropped icons so that they move relative to the viewport.  Is there a recommended way to do this with GSAP?  

Any tips much appreciated

See the Pen JjxPjvP by jimmys (@jimmys) on CodePen

[Rodrigo]

Hi @jamesstephensaul and welcome to the GSAP forums!

 

Thanks for being a premium user and supporting GSAP! 💚

 

Unfortunately your demo is not working. Maybe you could try forking one of our Vue3 starter templates from this collection:

https://stackblitz.com/@GreenSockLearning/collections/gsap-vue3-starters

 

Happy Tweening!

[jamesstephensaul]

Hi Rodrigo,

 

Many thanks for your response! 

 

Oops 😳.  My apologies, the demo is working now

[Rodrigo]

Hi,

 

I think the best way here is to reparent the element being dragged and be done with it.

 

Here is a simple example illustrating that and how this works regardless of the screen width:

https://stackblitz.com/edit/stackblitz-starters-6fdfv3?description=GSAP with Vue&file=src%2FApp.vue&title=GSAP Starter

 

It sure does need some tinkering and I'd definitely would use conditional rendering using v-if, but I'll leave that to you.

 

Hopefully this helps.

Happy Tweening!

[jamesstephensaul]

Thanks Rodrigo, that's helpful 👍