QML拖拽问题：将重复生成的矩形拖拽到另一矩形上触发事件

这种需求完全可行，你的代码问题出在拖拽事件的层级处理和逻辑判断上，以下是修正方案：

核心问题分析 #

1. 拖拽的矩形会遮挡下方的DropArea，导致DropArea无法正确捕获拖拽进入/释放事件
2. Drag属性设置不完整，仅设置Drag.active缺少Drag.enabled，导致拖拽行为异常
3. onExited中的判断逻辑错误（containsDrag在触发onExited时已为false）

修正后的代码 #

Repeater {
    model: 5
    Item {
        id: element
        width: 150
        height: 150
        x: index * width

        DropArea {
            id: dropArea
            anchors.fill: parent

            // 允许接收来自其他拖拽源的事件
            drag.ignoreSource: false

            onContainsDragChanged: {
                if (containsDrag && drag.source !== element.draggableRectangle) {
                    console.log("拖拽进入元素", index)
                    element.draggableRectangle.color = "lightgreen"
                } else if (!containsDrag) {
                    element.draggableRectangle.color = "blue"
                }
            }

            onDropped: {
                if (drag.source !== element.draggableRectangle) {
                    console.log("拖拽释放到元素", index)
                    // 在这里添加你的业务逻辑，比如模拟文件拖入文件夹的处理
                    drag.source.color = "red"
                }
            }
        }

        Rectangle {
            id: draggableRectangle
            anchors.centerIn: parent
            color: "blue"
            height: 100
            width: 100

            Drag.enabled: true
            Drag.active: dragArea.drag.active
            // 拖拽时半透明，方便观察目标区域
            Drag.opacity: dragArea.drag.active ? 0.7 : 1

            MouseArea {
                id: dragArea
                anchors.fill: parent
                drag.target: draggableRectangle
                drag.axis: Drag.XandYAxis

                onDoubleClicked: {
                    // 保留你的双击逻辑
                }
            }
        }
    }
}

关键改动说明 #

• 简化层级：移除冗余的surfaceContainer，让DropArea直接作为Item的子元素，层级更清晰
• 完善Drag配置：添加Drag.enabled: true确保矩形可拖拽，设置Drag.opacity优化拖拽体验
• DropArea事件优化：通过drag.ignoreSource: false明确允许接收其他拖拽源的事件，避免默认过滤
• 逻辑修正：用containsDragChanged统一处理拖拽进入/离开状态，修正onDropped的源判断逻辑，确保只响应非自身的拖拽操作

内容的提问来源于stack exchange，提问作者Dat8StringGuy