diff --git a/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx b/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
index 28e5d1f1c..172c6a8cd 100644
--- a/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
+++ b/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
@@ -358,9 +358,17 @@ function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: Re
 
     return note && (
         <JsPlumbItem
+            id={idToNoteId(note.noteId)}
             className={`note-box ${note?.getCssClass()}`}
             onContextMenu={contextMenuHandler}
             x={x} y={y}
+            draggable={{
+                start() {},
+                drag() {},
+                stop(params) {
+
+                },
+            }}
         >
             <NoteLink className="title" title={title} notePath={noteId} noTnLink noContextMenu />
             <div className="endpoint" title={t("relation_map.start_dragging_relations")} />
diff --git a/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx b/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx
index 6da913f45..2aab703db 100644
--- a/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx
+++ b/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx
@@ -1,7 +1,9 @@
-import { jsPlumb, Defaults, jsPlumbInstance } from "jsplumb";
-import { ComponentChildren, RefObject } from "preact";
+import { jsPlumb, Defaults, jsPlumbInstance, DragOptions } from "jsplumb";
+import { ComponentChildren, createContext, RefObject } from "preact";
 import { HTMLProps } from "preact/compat";
-import { useEffect, useRef } from "preact/hooks";
+import { useContext, useEffect, useRef } from "preact/hooks";
+
+const JsPlumbInstance = createContext<RefObject<jsPlumbInstance> | undefined>(undefined);
 
 export function JsPlumb({ className, props, children, containerRef: externalContainerRef, apiRef, onInstanceCreated }: {
     className?: string;
@@ -36,18 +38,30 @@ export function JsPlumb({ className, props, children, containerRef: externalCont
 
     return (
         <div ref={containerRef} className={className}>
-            {children}
+            <JsPlumbInstance.Provider value={apiRef}>
+                {children}
+            </JsPlumbInstance.Provider>
         </div>
     )
 }
 
-export function JsPlumbItem({ x, y, children, ...restProps }: {
+export function JsPlumbItem({ x, y, children, draggable, ...restProps }: {
     x: number;
     y: number;
     children: ComponentChildren;
-} & Pick<HTMLProps<HTMLDivElement>, "className" | "onContextMenu">) {
+    draggable?: DragOptions;
+} & Pick<HTMLProps<HTMLDivElement>, "id" | "className" | "onContextMenu">) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const apiRef = useContext(JsPlumbInstance);
+
+    useEffect(() => {
+        if (!draggable || !apiRef?.current || !containerRef.current) return;
+        apiRef.current.draggable(containerRef.current, draggable);
+    }, [ draggable ]);
+
     return (
         <div
+            ref={containerRef}
             {...restProps}
             style={{ left: x, top: y }}
         >