position property is not biding when the options object is in the script (svelte version)

[amccampos]

The example in the docs explaining the position property works fine (link). However, when the options object is passed, the dragged element doesn't update programmatically.

For instance, the code below does not make the dragged element to get back to its original position when released.

<script>
  import { draggable } from '@neodrag/svelte'
  let position = { x: 0, y: 0 };
  let options = {
    position,
    onDrag: ({ offsetX, offsetY }) => {
      position = { x: offsetX, y: offsetY };
    },
    onDragEnd: ({ offsetX, offsetY }) => {
      position = { x: 0, y: 0 };
    }
  }
</script>

<div class="drag" use:draggable={options}>
  I can be moved with the slider too
</div>

X: <input type="range" min="0" max="300" bind:value={position.x} />
Y: <input type="range" min="0" max="300" bind:value={position.y} />

However, the code below does.

<script>
  import { draggable } from '@neodrag/svelte'
  let position = { x: 0, y: 0 }
</script>

<div class="drag" use:draggable={{
  position,
  onDrag: ({ offsetX, offsetY }) => {
    position = { x: offsetX, y: offsetY };
  },
  onDragEnd: ({ offsetX, offsetY }) => {
    position = { x: 0, y: 0 }
  }
}}>
  I can be moved with the slider too
</div>

X: <input type="range" min="0" max="300" bind:value={position.x} />
Y: <input type="range" min="0" max="300" bind:value={position.y} />

Version: 2.0.3 Framework: Svelte

[PuruVJ]

It is because your options variable isn't watching position. Instead of let options, use $: options.

Let me know if that helps :)