diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 6cc322a83e..62cabc14cd 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -27,10 +27,8 @@
 
   // Set ephemeral grid styles on the dragged component
   $: instance = componentStore.actions.getComponentInstance(id)
-  $: $instance?.setEphemeralStyles({
-    ...$gridStyles,
-    ...($gridStyles ? { "z-index": 999 } : null),
-  })
+  $: componentStyles = getComponentStyles($gridStyles)
+  $: $instance?.setEphemeralStyles(componentStyles)
 
   // Sugar for a combination of both min and max
   const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
@@ -41,6 +39,15 @@
     return [...component?.children][0]
   }
 
+  const getComponentStyles = gridStyles => {
+    let styles = { ...gridStyles }
+    if (gridStyles) {
+      styles["z-index"] = 999
+      styles["pointer-events"] = "none"
+    }
+    return styles
+  }
+
   const processEvent = Utils.throttle((mouseX, mouseY) => {
     if (!dragInfo?.grid) {
       return