diff --git a/packages/core/components/DraggableComponent/index.tsx b/packages/core/components/DraggableComponent/index.tsx
index 97c0d73562..5dff86d2b7 100644
--- a/packages/core/components/DraggableComponent/index.tsx
+++ b/packages/core/components/DraggableComponent/index.tsx
@@ -14,6 +14,8 @@ export const DraggableComponent = ({
   isSelected = false,
   onClick = () => null,
   onMount = () => null,
+  onMouseDown = () => null,
+  onMouseUp = () => null,
   onMouseOver = () => null,
   onMouseOut = () => null,
   onDelete = () => null,
@@ -32,6 +34,8 @@ export const DraggableComponent = ({
   isSelected?: boolean;
   onClick?: (e: SyntheticEvent) => void;
   onMount?: () => void;
+  onMouseDown?: (e: SyntheticEvent) => void;
+  onMouseUp?: (e: SyntheticEvent) => void;
   onMouseOver?: (e: SyntheticEvent) => void;
   onMouseOut?: (e: SyntheticEvent) => void;
   onDelete?: (e: SyntheticEvent) => void;
@@ -75,6 +79,8 @@ export const DraggableComponent = ({
           }}
           onMouseOver={onMouseOver}
           onMouseOut={onMouseOut}
+          onMouseDown={onMouseDown}
+          onMouseUp={onMouseUp}
           onClick={onClick}
         >
           {debug}
diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
index 9ef6dd935d..244df1229c 100644
--- a/packages/core/components/DropZone/index.tsx
+++ b/packages/core/components/DropZone/index.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, useContext, useEffect } from "react";
+import { CSSProperties, useContext, useEffect, useState } from "react";
 import { DraggableComponent } from "../DraggableComponent";
 import DroppableStrictMode from "../DroppableStrictMode";
 import { getItem } from "../../lib/get-item";
@@ -79,6 +79,8 @@ function DropZoneEdit({ zone, style }: DropZoneProps) {
   // we use the index rather than spread to prevent down-level iteration warnings: https://stackoverflow.com/questions/53441292/why-downleveliteration-is-not-on-by-default
   const [draggedSourceArea] = getZoneId(draggedSourceId);
 
+  const [userWillDrag, setUserWillDrag] = useState(false);
+
   const userIsDragging = !!draggedItem;
   const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea;
   const draggingNewComponent = draggedSourceId?.startsWith("component-list");
@@ -108,7 +110,7 @@ function DropZoneEdit({ zone, style }: DropZoneProps) {
     : isRootZone;
   const hoveringOverZone = hoveringZone === zoneCompound;
 
-  let isEnabled = false;
+  let isEnabled = userWillDrag;
 
   /**
    * We enable zones when:
@@ -234,6 +236,14 @@ function DropZoneEdit({ zone, style }: DropZoneProps) {
                           });
                           e.stopPropagation();
                         }}
+                        onMouseDown={(e) => {
+                          e.stopPropagation();
+                          setUserWillDrag(true);
+                        }}
+                        onMouseUp={(e) => {
+                          e.stopPropagation();
+                          setUserWillDrag(false);
+                        }}
                         onMouseOver={(e) => {
                           e.stopPropagation();
 
diff --git a/packages/core/lib/get-item.ts b/packages/core/lib/get-item.ts
index 8780ee0602..d24629c37d 100644
--- a/packages/core/lib/get-item.ts
+++ b/packages/core/lib/get-item.ts
@@ -1,4 +1,4 @@
-import { Data, MappedItem } from "../types/Config";
+import { Data } from "../types/Config";
 import { rootDroppableId } from "./root-droppable-id";
 import { setupZone } from "./setup-zone";