diff --git a/packages/core/components/DropZone/context.tsx b/packages/core/components/DropZone/context.tsx index d4761b5580..fe0200465c 100644 --- a/packages/core/components/DropZone/context.tsx +++ b/packages/core/components/DropZone/context.tsx @@ -41,6 +41,8 @@ export type DropZoneContext< pathData?: PathData; registerPath?: (selector: ItemSelector) => void; mode?: "edit" | "render"; + zoneWillDrag?: string; + setZoneWillDrag?: (zone: string) => void; } | null; export const dropZoneContext = createContext(null); @@ -146,6 +148,8 @@ export const DropZoneProvider = ({ [value, setPathData] ); + const [zoneWillDrag, setZoneWillDrag] = useState(""); + return ( <> {value && ( @@ -164,6 +168,8 @@ export const DropZoneProvider = ({ activeZones, registerPath, pathData, + zoneWillDrag, + setZoneWillDrag, ...value, }} > diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx index 5744766ccc..041efb05b5 100644 --- a/packages/core/components/DropZone/index.tsx +++ b/packages/core/components/DropZone/index.tsx @@ -1,4 +1,4 @@ -import { CSSProperties, useContext, useEffect, useState } from "react"; +import { CSSProperties, useContext, useEffect } from "react"; import { DraggableComponent } from "../DraggableComponent"; import { Droppable } from "@measured/dnd"; import { getItem } from "../../lib/get-item"; @@ -38,6 +38,8 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) { registerZoneArea, areasWithZones, hoveringComponent, + zoneWillDrag, + setZoneWillDrag = () => null, } = ctx! || {}; let content = data.content || []; @@ -82,7 +84,7 @@ function DropZoneEdit({ zone, allow, disallow, 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 userWillDrag = zoneWillDrag === zone; const userIsDragging = !!draggedItem; const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea; @@ -172,6 +174,9 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) { isAreaSelected, hasChildren: content.length > 0, })} + onMouseUp={() => { + setZoneWillDrag(""); + }} > { e.stopPropagation(); - setUserWillDrag(true); - }} - onMouseUp={(e) => { - e.stopPropagation(); - setUserWillDrag(false); + setZoneWillDrag(zone); }} onMouseOver={(e) => { e.stopPropagation();