QML实现鼠标按下动态创建组件后无需二次点击直接拖拽

点击黑色方块时的鼠标按下事件，全程被黑色方块绑定的MouseArea捕获持有，动态生成的新元素自带的拖拽MouseArea没有接收到本次按下事件，内置的拖拽状态不会自动激活，因此必须松开鼠标重新点击新元素，让它自身的MouseArea捕获到按下信号后才能触发拖拽。

核心逻辑是新元素创建完成后，手动将当前的鼠标按下事件转交给新元素的拖拽区域，直接激活拖拽状态，全程不需要松开鼠标。

第一步：调整NewElement.qml #

给内部的拖拽MouseArea指定id，方便外部调用：

Item {
    id: red
    width: 30
    height: 30

    Rectangle {
        anchors.fill: parent
        color: "red"
    }

    MouseArea {
        id: dragArea // 新增id标记拖拽区域
        anchors.fill: parent
        drag.target: red
        drag.axis: Drag.XandYAxis
    }
}

第二步：调整main.qml的创建逻辑 #

创建完新元素后，计算鼠标相对新元素的坐标，手动触发拖拽区域的按下事件，同时修正新元素的初始位置，让鼠标落在新元素中心避免拖拽偏移：

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle
    {
        id: black
        x: 200
        y: 200
        width: 50
        height: 50
        color: "black"

        MouseArea {
            anchors.fill: parent

            onPressed:
            {
                var pos = mapToItem(black.parent, mouse.x, mouse.y)
                var newItem = createNew(pos)
                if (!newItem) return
                // 换算鼠标在新元素坐标系内的位置
                var localPos = mapToItem(newItem, mouse.x, mouse.y)
                // 构造按下事件参数传递给新元素的拖拽区域，激活拖拽
                newItem.dragArea.press({
                    x: localPos.x,
                    y: localPos.y,
                    button: mouse.button,
                    buttons: mouse.buttons,
                    modifiers: mouse.modifiers
                })
            }

            function createNew(pos) {
                var comp = Qt.createComponent("qrc:/src/qml/NewElement.qml");
                if (comp.status !== Component.Ready)
                {
                    console.log("Error creating component");
                    return null
                }
                // 初始坐标各减15（新元素宽高的一半），让鼠标落在新元素中心，避免位置偏移
                var link = comp.createObject(black.parent, { x: pos.x - 15, y: pos.y - 15, z:100});

                if (link === null) {
                    console.log("Error creating object");
                }
                return link
            }
        }
    }
}

改完之后，点击黑色方块生成新元素时不需要松开鼠标，直接移动就能把新元素拖到目标位置，松开鼠标就结束拖拽，和原生拖拽体验一致。

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