convert setDrag to ts

client/src/components/History/Content/ContentItem.vue

@@ -113,7 +113,7 @@ import { updateContentFields } from "components/History/model/queries";
 import StatelessTags from "components/TagsMultiselect/StatelessTags";
 import { useEntryPointStore } from "stores/entryPointStore";
 
-import { clearDrag } from "@/utils/setDrag.js";
+import { clearDrag } from "@/utils/setDrag.ts";
 
 import CollectionDescription from "./Collection/CollectionDescription";
 import { JobStateSummary } from "./Collection/JobStateSummary";

client/src/stores/eventStore.ts

@@ -28,7 +28,6 @@ export const useEventStore = defineStore("eventStore", () => {
 
     return {
         multipleDragData,
-        dragData,
         clearDragData,
         getDragData,
         setDragData,

client/src/utils/setDrag.ts

@@ -0,0 +1,27 @@
+/**
+ * Helper to configure datatransfer for drag & drop operations
+ */
+import { useEventStore } from "@/stores/eventStore";
+
+export function setDrag(evt: DragEvent, data = null, multiple = false) {
+    const eventStore = useEventStore();
+    if (data) {
+        evt.dataTransfer?.setData("text", JSON.stringify([data]));
+        // data submitted through datatransfer is only available upon drop,
+        // in order to access the drop data immediately this event store is used.
+        eventStore.setDragData(data, multiple);
+    }
+    if (evt.dataTransfer) {
+        evt.dataTransfer.dropEffect = "move";
+        evt.dataTransfer.effectAllowed = "move";
+        const elem = document.getElementById("drag-ghost");
+        if (elem) {
+            evt.dataTransfer.setDragImage(elem, 0, 0);
+        }
+    }
+}
+
+export function clearDrag() {
+    const eventStore = useEventStore();
+    eventStore.clearDragData();
+}