Implementing Drag-and-Drop using Svelte 5

It's been two weeks since Svelte 5 was published on npm as the next version.
During that time, I had the chance to try out Svelte 5 in my free time, and working with runes was quite a fun task.
In this post, I'll introduce drag-and-drop functionality using Svelte 5.
For projects using the CLI, as Dev.to's embed feature doesn't seem to fully support StackBlitz, I'll provide a REPL link instead.
Svelte 5 preview

Synergy between Runes and Module Context

The new feature in Svelte 5, Rune, is a kind of macro that allows you to write reactive programs outside Svelte files in js files, just like in Svelte files.
This is particularly convenient when leveraging Svelte's module context, which is compiled in the following way.

<script context="module">
// scripts in module
// scripts in module
</script>
<script>
// scripts in default
// scripts in default
</script>

<template></template>

// scripts in module
// scripts in module
export default function App() {
  // scripts in default
  // scripts in default
}

The module context is a great space for writing reactive instance creation functions using runes.

<script context="module">
export function create_counter(count = 0) {
  let count$ = $state(count)
  return {
    get $count() {
      return count$
    },
    increment() {
      count$ += 1
    }
  }
}
</script>
<script>
let counter = create_counter()
</script>

<button onclick={counter.increment}>
  clicks: {counter.$count}
</button>

Considerations for mouse move and mouse up events

To implement drag and drop, I used mousedown, mousemove, and mouseup events.
I chose this approach instead of using draggable="true" because I wanted to display an HTML element instead of a dragImage.
One thing to note here is that the mousemove and mouseup events need to be connected to the window.

<svelte:window
    onmousemove={handle_mousemove}
    onmouseup={handle_mouseup}
    ontouchmove={handle_touchmove}
    ontouchend={handle_touchend} />

DragContainer and Draggable

When dragging begins, the draggable passes the drag target to the drag container.
Since there is only one drag target, a drag container with drag-related logic can control multiple draggables, even with just one instance.

<DragContainer bind:setDragElement={set_drag_element}
    ondragend={todo_list.end_drag}>
  <DragItem index={i}
      {todo_list}
      {set_drag_element}
      type="todo" />

Conclusion

While Svelte 5 hasn't been officially released yet, the current preview version is already quite intriguing.
What's astonishing is how convenient and rational the syntax of runes becomes the more you use it.
Declarative frontend frameworks, originating from React, seem to already have a familiar feel to the implicit magic executed by runes, given their nature of meta-programming.