Drop 事件不会被触发（react-draggable）

Question

目前我正在使用react-draggable 编写可拖动组件。

但是，当我将我的组件拖到另一个组件（组件父组件之外）时，onDrop 事件不会触发。

下面是我的组件：

const DraggableBaseCard = (props: {
    id: String,
    positionX: Number,
    positionY: Number,
    positionZ: Number,
    width: Number | String,
    height: Number | String,
    zoomFactor: Number,
    isLocked: Boolean,
}) => {
    const boardStore = useBoardStore();
    const [position, updatePosition] = useState({
        x: props.positionX,
        y: props.positionY,
    });

    const onDragStop = (_, elementData) =>
        handleDrop(elementData, updatePosition, boardStore, props.id);

    return (
        <Draggable
            defaultClassName="gulabee-base-card"
            disabled={props.isLocked}
            handle={props.customHandle ?? ".draggable-component"}
            bounds={props.bounds ?? { left: 0, top: 0 }}
            defaultPosition={position}
            onStop={props.onStop ?? onDragStop}
            onDrag={props.onDrag}
            scale={props.zoomFactor || 1}
            key={props.id}
        >
            <div
                {...props}
                className={`draggable-component ${props.className || ""} p-2`}
                onDragStart={(e) => {
                    e.dataTransfer.setData("cardID", props.id);
                    console.log("Drag Start");
                }}
                style={{
                    zIndex: props.positionZ,
                    cursor: "pointer",
                    position: "absolute",
                    width: props.width || "10rem",
                    height: props.height || "auto",
                    border: props.noBorder
                        ? undefined
                        : "solid 1px rgba(0, 0, 0, 0.3)",
                }}
            >
                <Dropdown
                    overlay={() => CardContextMenu(props.id)}
                    onContextMenu={(e) => {
                        e.stopPropagation();
                    }}
                    trigger={["contextMenu"]}
                >
                    <div
                        className="card-children"
                        style={{ width: "100%", height: "100%" }}
                    >
                        {props.children}
                    </div>
                </Dropdown>
            </div>
        </Draggable>
    );
};

const handleDrop = (elementData, updatePosition, boardStore, cardId) => {
    updatePosition({
        x: roundByGridSize(elementData?.x || 0, GRID_SIZE),
        y: roundByGridSize(elementData?.y || 0, GRID_SIZE),
    });

    boardStore.cards[cardId].positionX = elementData?.x / GRID_SIZE;
    boardStore.cards[cardId].positionY = elementData?.y / GRID_SIZE;
};

这是我如何测试掉落区域：

const PocketBag = observer((props) => {
    return (
        <div style={{ height: "100%" }} onDrop={(e) => alert("Dropped")}>
            Dropzone
        </div>
    );
});

当我将 DraggableBaseCard 拖入 PocketBag 时，警报不会出现。 DraggableBaseCard 的 onDragStart 事件也不起作用，除非我将 draggable 道具设置为 true，但它以某种方式发生冲突带有可拖动组件

请帮我解决我正在哭泣的问题:(

Answer 1

您需要通过将此代码添加到要放置的元素来允许放置。 HTML 默认不允许放置

    onDragOver={event=>event.preventDefault()}