State not updating until after item is dropped

[williamcaseylucas]

Hi,

I'm running into two small issues:

1. State is not updating until after item is dropped

I'm trying to update the opened state so that the card collapses while I'm in the middle of dragging, but this only is reflected after I drop the card. Is there a way to leverage onMount or $effect to accomplish this? The swapy library was somewhat buggy when I tried it, but the logic they used for $effect and onMount allowed me to accomplish this desired UI update. I would love to have the same functionality here! (link to swapy example https://github.com/TahaSh/swapy/blob/main/examples/svelte-dynamic/App.svelte)

2. When item is expanded and dragged, it shifts slightly down

When I click and hold on the handle when my content is expanded, it shifts slightly down from where my cursor was. (This doesn't happen when I click and drag when the item is collapsed). Is there a way to adjust this?

Playground link

I've included a link to a playground to demonstrate my current experience (please toggle tailwind to see it correctly) https://svelte.dev/playground/6dd35481d2184d618a2c7957e82b8f5f?version=5.25.3

[isaacHagoel]

1. The library offers ways to manipulated the dragged element during drag. Please look at the examples in the README. In general you can use transformDraggedElement or use the dragged element id to get it and manipulate it whenever you want. I also suggest preserving its open state on drop.
2. The movement you see has to do with the number styling. it looks like it's changing sizes slightly when the element (and styles) are copied on drag start. Changing the element type from h1 to a div makes it not do that so probably it is something that has to do with h1 styling affected by the parent. Have a look into that.

[williamcaseylucas]

Thanks for the quick reply!

For the first item, what's strange is even if I modify the state with transformDraggedElement, the UI only updates after it is dropped. I'm not sure if it is related to where the use:dragHandleZone is being constructed that's causing the component not to re-render.

For the second item, can you review the playground link one more time? When I don't change "openedSection = """ when the drag starts, it looks like it shoots the element super high when there are multiple children contained. Is there a good workaround for this? Maybe a different way of constructing this draggable component?

[isaacHagoel]

I can try to find time to redo your REPL.
In general - in transformDraggedElement you need to modify the DOM directly (that's why you get passed the element) - the dragged element is not affected by Svelte.
The first thing i would change, instead of the if block that conditionally renders the open section i would use it to toggle a class that hides/shows the expanded part (e.g. with height:0 if you want to be able to animate when it opens or display:none) - then in transformDraggedElement (or any other way you use to modify the element) you can just toggle that class directly.
Did you see these?
https://svelte.dev/playground/438fca28bb1f4eb1b34eff9dc6a728dc?version=3.59.2
https://svelte.dev/playground/3d8be94b2bbd407c8a706d5054c8df6a?version=3.59.2

Not sure what you mean by "it looks like it shoots the element super high when there are multiple children contained", can you capture a video?

P.S
I am not sure how you even use the drag handles in your REPL... when play with it I always add a character inside so that the handle has height.