Setting position on OnDragEnd has undefined behavior.

here’s an example svelte component:

<script>
    import { draggable } from '@neodrag/svelte'

    let x = 100
    let y = 100

    function onDragEnd(e){
        x = 300
        y = 300
    }
</script>
<div
     use:draggable={{
         position: { x, y },
         onDragEnd,
     }}
>

Say after I drop it, i want the component to move to (300,300). On first drag and drop, it works as expected. However, on subsequent ones, the component doesnt snap back to (300,300), it instead stays where it was dropped.

Furthermore, if this was:

    function onDragEnd(e){
        x = 0
        y = 0
    }

Then it doesnt even move the first time.

[PuruVJ]

Closing as unresponsive. Feel free to open if issue still here

[PuruVJ]

OK I got the issue. It’s the issue when you don’t update x and y on onDrag event.

Svelte action can’t affect the upstream variable passed to it, so you have to update them manually by listening to onDrag event. In your example, it stays int the same place because x and y are 300 already, and setting them to 300 again won’t trigger any .

It’s listed here https://github.com/PuruVJ/neodrag/tree/main/packages/svelte#controlled-vs-uncontrolled