[Solved] Timing issue with draganddrop and reparenting



  • 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"
                        }
                    }
                }
            }
        }
    }
    

    }@


  • Moderators

    Hi,

    Refer to your other post.



  • 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()
    }@


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.