diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte
index 27aac391..31a8d459 100644
--- a/examples/svelte/src/routes/overview/+page.svelte
+++ b/examples/svelte/src/routes/overview/+page.svelte
@@ -144,9 +144,21 @@
 	on:connectend={(event) => console.log('on connect end', event)}
 	on:paneclick={(event) => console.log('on pane click', event)}
 	on:panecontextmenu={(event) => {
-		event.preventDefault();
 		console.log('on pane contextmenu', event);
 	}}
+	on:nodedrag={(event) => {
+		console.log('on node drag', event);
+	}}
+	on:nodedragstart={(event) => {
+		console.log('on node drag start', event);
+	}}
+	on:nodedragstop={(event) => {
+		console.log('on node drag stop', event);
+	}}
+	on:nodecontextmenu={(event) => {
+		event.detail.event.preventDefault();
+		console.log('on node contextmenu', event);
+	}}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 491aa21f..30da979c 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 0.0.21
+
+- add `on:nodedragstart`, `on:nodedrag` and `on:nodedragstop`
+- add `on:nodecontextmenu`
+
 ## 0.0.20
 
 - [breaking change] use same convention for all custom events: Always pass the original event if possible and additional data
diff --git a/packages/svelte/src/lib/actions/drag/index.ts b/packages/svelte/src/lib/actions/drag/index.ts
index 5a0d4436..276e319c 100644
--- a/packages/svelte/src/lib/actions/drag/index.ts
+++ b/packages/svelte/src/lib/actions/drag/index.ts
@@ -1,22 +1,28 @@
 import { get } from 'svelte/store';
-import { XYDrag } from '@xyflow/system';
+import { XYDrag, type OnDrag } from '@xyflow/system';
 
 import type { SvelteFlowStore } from '$lib/store/types';
 
-type UseDragParams = {
+export type UseDragParams = {
   store: SvelteFlowStore;
   disabled?: boolean;
   noDragClass?: string;
   handleSelector?: string;
   nodeId?: string;
   isSelectable?: boolean;
+  onDrag?: OnDrag;
+  onDragStart?: OnDrag;
+  onDragStop?: OnDrag;
 };
 
 export default function drag(domNode: Element, params: UseDragParams) {
+  const { store, onDrag, onDragStart, onDragStop } = params;
   const dragInstance = XYDrag({
     domNode,
+    onDrag,
+    onDragStart,
+    onDragStop,
     getStoreItems: () => {
-      const { store } = params;
       const snapGrid = get(store.snapGrid);
 
       return {
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 17c8e4ce..2be5c098 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -97,6 +97,15 @@
       disabled: false,
       handleSelector: dragHandle,
       noDragClass: 'nodrag',
+      onDrag: (event, _, node, nodes) => {
+        dispatch('nodedrag', { event, node, nodes });
+      },
+      onDragStart: (event, _, node, nodes) => {
+        dispatch('nodedragstart', { event, node, nodes });
+      },
+      onDragStop: (event, _, node, nodes) => {
+        dispatch('nodedragstop', { event, node, nodes });
+      },
       store
     }}
     bind:this={nodeRef}
@@ -115,6 +124,7 @@
     on:mouseenter={(event) => dispatchEvent('nodemouseenter', event)}
     on:mouseleave={(event) => dispatchEvent('nodemouseleave', event)}
     on:mousemove={(event) => dispatchEvent('nodemousemove', event)}
+    on:contextmenu={(event) => dispatchEvent('nodecontextmenu', event)}
   >
     <svelte:component
       this={nodeComponent}
diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
index bc30ea1a..c35e11d6 100644
--- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
@@ -72,6 +72,10 @@
       on:connectstart
       on:connect
       on:connectend
+      on:nodedrag
+      on:nodedragstart
+      on:nodedragstop
+      on:nodecontextmenu
     />
   {/each}
 </div>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index bb359302..0b2fac70 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -154,6 +154,10 @@
           on:connectstart
           on:connect
           on:connectend
+          on:nodedragstart
+          on:nodedrag
+          on:nodedragstop
+          on:nodecontextmenu
         />
         <NodeSelection />
       </ViewportComponent>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 97d5a3a9..1c2f6ebb 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -12,7 +12,8 @@ import type {
   CoordinateExtent,
   PanOnScrollMode,
   IsValidConnection,
-  HandleType
+  HandleType,
+  NodeBase
 } from '@xyflow/system';
 
 import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
@@ -74,4 +75,8 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
   'on:paneclick'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
   'on:panecontextmenu'?: CustomEvent<{ event: MouseEvent }>;
+  'on:nodedragstart'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
+  'on:nodedrag'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
+  'on:nodedragstop'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
+  'on:nodecontextmenu'?: CustomEvent<{ event: MouseEvent; node: NodeBase }>;
 };