onDropped 在 QML 中没有被触发

Question

我正在尝试实现拖放功能，我可以成功拖放项目，但是每当将项目放入 dropArea 时，不会调用 onDropped 处理程序，但会调用 onExited、onPositionChanged 和 onEntered 等所有其他处理程序.

这是我的 DragItem 组件：

import QtQuick

Item {
    id: root
    required property string colorKey
    width: 64
    height: 64

    MouseArea {
        id: mouseArea
        width: 64
        height: 64
        anchors.centerIn: parent
        drag.target: item
        onReleased: {
            console.log("Item Released")
             parent = item.Drag.target !== null ? item.Drag.target : root
        }
        Rectangle {
            id: item
            width: 64
            height: 64
            anchors {
                verticalCenter: parent.verticalCenter
                horizontalCenter: parent.horizontalCenter
            }

            color: root.colorKey
            Drag.keys: [ root.colorKey ]
            Drag.active: mouseArea.drag.active
            Drag.hotSpot.x: 32
            Drag.hotSpot.y: 32
            states: State {
                when: mouseArea.drag.active
                AnchorChanges {
                    target: item
                    anchors {
                        verticalCenter: undefined
                        horizontalCenter: undefined
                    }
                }
            }
        }
    }
}

这是我的放置区域：

DropArea{
        id: visualizer
        width: mainWindow.width / 2
        height: mainWindow.height - toolBar.height
        anchors.top: toolBar.bottom
        anchors.left: dragRect.right
        anchors.right: mainWindow.right
        visible: true

        property string colorKey
        //keys: [ "black", "skyblue" ]

        // Handle the drop event
        // this is not being invoked..
        onDropped: {
            // Access the color key of the dropped item
            console.log("Dropped")

        }

        onEntered: {
            console.log("Entered")
        }

        onExited: {
            console.log("Exited")
        }

        onPositionChanged: {
            console.log("Position Changed")
        }
    }
}

Answer 1

您必须对拖动的项目调用

drop()

：

onReleased: (mouse) => {
            console.log("Item Released")
            // parent = item.Drag.target !== null ? item.Drag.target : root

            // drop the item
            item.Drag.drop();
        }