[Solved] Timing issue with draganddrop and reparenting

kaivolde

Hi folks,

I encountered a "timing-issue" and unfortunately I don't have an idea how to solve it.

Setup: I have a rectangle which can be dragged around with the mouse and there is a DropArea where the rectangle can be dropped. The DropArea has a Layout where the dropped rectangle should be placed in.

A dropped rectangle “arrives” at the onDropped-handler of the DropArea.
Here a new parent should be set to the rectangle (see lines 145 - 148).

A ParentChange-state is attached to the drag-rectangle. The change of the parent ensures, that the dragged rectangle is visible all the time when it is dragged around. When the drag finishes by releasing the mouse the rectangle is returned to its old parent. (see lines 94 - 102)

Now the problem: The 2 described mechanisms interfere somehow. Setting a new parent in the drop-handler does not work if the ParentChange is active too. Both mechanisms standalone work perfectly.

Below the is my source-code, if someone wants to try it out. What can be done to solve this issue?

Thanks in advance.

Best regards
Kai

@import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

Window {
visible: true
width: 600
height: 360

Rectangle {
    id: globalBase
    anchors.fill: parent
    radius: 5

    border {
        color: "red"
        width:  2
    }

    Text {
        anchors {
            left: parent.left
            top: parent.top
            topMargin: 10
            leftMargin: 10
        }

        text: "base"
    }

    RowLayout {

        spacing: 10
        anchors.fill: parent
        anchors.margins: 50

        Rectangle {

            id: dragRect

            radius: 5
            border {
                color: "green"
                width:  2
            }

            Layout.fillWidth: true
            Layout.fillHeight: true

            Text {
                anchors {
                    left: parent.left
                    top: parent.top
                    topMargin: 10
                    leftMargin: 10
                }

                text: "Drag Area"
            }

            ColumnLayout {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 0
                spacing: 2

                Rectangle {
                    width: 50
                    height: 50
                    color: "yellow"
                }

                Rectangle {
                    id: dragTile

                    width: 50
                    height: 50

                    radius: 5
                    border {
                        color: "green"
                        width:  2
                    }

                    Drag.active: mouseArea.drag.active
                    Drag.hotSpot.x: 10
                    Drag.hotSpot.y: 10

                    Text {
                        anchors.centerIn: parent
                        text: "drag"
                    }

                    states: [
                        State {
                            when: mouseArea.drag.active
                            ParentChange {
                                target: dragTile
                                parent: globalBase
                            }
                        }
                    ]

                    MouseArea {
                        id: mouseArea
                        anchors.fill: parent
                        drag.target: dragTile

                        onReleased: {
                            dragTile.Drag.drop()
                        }
                    }
                }
            }
        }

        Rectangle {

            id: dropRect

            radius: 5
            border {
                color: "blue"
                width:  2
            }

            Layout.fillWidth: true
            Layout.fillHeight: true


            Text {
                anchors {
                    left: parent.left
                    top: parent.top
                    topMargin: 10
                    leftMargin: 10
                }

                text: "Drop Area"
            }

            DropArea {
                anchors.fill: parent

                onDropped: {
                    drop.accept()
                    drop.source.parent = myLayout
                }

                ColumnLayout {
                    id: myLayout

                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    spacing: 2

                    Rectangle {
                        width: 50
                        height: 50
                        color: "yellow"
                    }
                }
            }
        }
    }
}

}@

p3c0

Hi,

Refer to your other post.

kaivolde

The problem can be solved by resetting the state before executing the drop. It's a quirk but works.

@ onReleased: {
dragTile.state = ""
dragTile.Drag.drop()
}@