diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 9e35829c..48c23eba 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -253,9 +253,11 @@ export function Pane({
     selectionStarted.current = false;
   };
 
+  const draggable = panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0));
+
   return (
     <div
-      className={cc(['react-flow__pane', { draggable: panOnDrag, dragging, selection: isSelecting }])}
+      className={cc(['react-flow__pane', { draggable, dragging, selection: isSelecting }])}
       onClick={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
       onContextMenu={wrapHandler(onContextMenu, container)}
       onWheel={wrapHandler(onWheel, container)}
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index 8b413389..1d797af9 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -212,7 +212,7 @@
 <div
   bind:this={container}
   class="svelte-flow__pane"
-  class:draggable={panOnDrag}
+  class:draggable={panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0))}
   class:dragging={$dragging}
   class:selection={isSelecting}
   on:click={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index 586652c9..eccf1db8 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -75,10 +75,10 @@
 
   &.draggable {
     cursor: grab;
+  }
 
-    &.dragging {
-      cursor: grabbing;
-    }
+  &.dragging {
+    cursor: grabbing;
   }
 }