Situation Edit: Handle drag & drop of persons in roles.

src/lib/components/situations/RolePersonsEdit.svelte

+<script lang="ts">
+  import { createEventDispatcher } from "svelte"
+  import { flip } from "svelte/animate"
+  import { dndzone } from "svelte-dnd-action"
+
+  export let idPrefix: string
+  export let names: string[] | undefined | null
+  export let type: string
+
+  const dispatch = createEventDispatcher()
+  const existingItemByName = {}
+  let existingItems = []
+  let existingNames = []
+  const flipDurationMs = 300
+
+  $: items = computeItems(names)
+
+  /// Create items from names, but try to reuse existing items when possible.
+  /// Otherwise, svelte-dnd-action fails.
+  function computeItems(names: string[] | undefined | null) {
+    if (names == null) {
+      return []
+    }
+    if (
+      names.length === existingNames.length &&
+      names.every((name, index) => name === existingNames[index])
+    ) {
+      return existingItems
+    }
+    const items = names.map((name) => {
+      let item = existingItemByName[name]
+      if (item === undefined) {
+        item = existingItemByName[name] = { id: `${idPrefix}.${name}`, name }
+      }
+      return item
+    })
+    existingNames = names
+    existingItems = items
+    return items
+  }
+
+  function handleDndConsider({ detail }: CustomEvent<DndEvent>) {
+    existingItems = detail.items
+    existingNames = detail.items.map((item) => item.name)
+    dispatch("change", existingNames)
+  }
+
+  function handleDndFinalize({ detail }: CustomEvent<DndEvent>) {
+    existingItems = detail.items
+    existingNames = detail.items.map((item) => item.name)
+    dispatch("change", existingNames)
+  }
+</script>
+
+<ul
+  on:consider={handleDndConsider}
+  on:finalize={handleDndFinalize}
+  style="min-height: 0.5rem;"
+  use:dndzone={{
+    flipDurationMs,
+    items,
+    type,
+  }}
+>
+  {#each items as { id, name } (id)}
+    <li animate:flip={{ duration: flipDurationMs }} class="ml-4">{name}</li>
+  {/each}
+</ul>