Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

start dragging slowly leads to drag target changing position for a short time



  • Hello. I am developing a little drag and drop qml application. Please give me some feedback and help to fix the Problem.
    I would like to hear some suggestions to improve the code as well.

    1. Video showing the application and the problem:
      https://youtu.be/Yf5m70Fk9XM

    2. Text describing the application:
      There are 3 Rectangles and a background:
      Rectangle one is used as drag target (the white one).
      The blue and yellow Rectangles are drop zones.
      It should be possible to place the white rectangle on any place in the scene.
      If the white rectangle gets placed on the yellow or blue rectangle the color of the Rectangles blue or yellow changes to green and the white rectangle gets centered in the rectangle it got placed in.

    3. Reproducing Problem
      After dragging the white Rectangle for the first time in the yellow or blue Rectangle.
      Dragging slowly the white Rectangle out of the containing green Rectangle (before yellow or blue Rectangle) can lead to the white rectangle is jumping away from the cursor for a short time and jumps back to to cursor.

    4. Code:
      import QtQuick 2.13
      import QtQuick.Window 2.13

    Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    id: rootWindow

    Rectangle {
        id: root
        color: "steelblue"
        anchors.fill: parent
        DropArea {
            id: dropArea
            anchors.verticalCenter: parent.verticalCenter
            width: 150
            height: 150
            onDropped: {
                drop.accept()
                console.log("dropArea drop accepted")
                rectangleToMove.parent = dropArea
            }
            property color colorChild: "blue"
            Rectangle {
                id: dropZone
                anchors.fill: parent
                color: parent.colorChild
            }
        }
        DropArea {
            id: dropArea1
            anchors.horizontalCenter: parent.horizontalCenter
            width: 150
            height: 150
            onDropped: {
                drop.accept()
                console.log("dropArea1 drop accepted")
                rectangleToMove.parent = dropArea1
            }
            property string colorChild: "yellow"
            Rectangle {
                id: dropZone1
                anchors.fill: parent
                color: parent.colorChild
            }
        }
        Rectangle {
            id: rectangleToMove
            property bool defaultState: true
            width: 100
            height: 100
            x: 300
            y: 300
            Drag.active: dragHandler.active
            DragHandler {
                id: dragHandler
                onActiveChanged: if (!dragHandler.active) {
                                     //                                     parent.Drag.drop()
                                     if (parent.Drag.drop(//drops the item
                                                          ) !== Qt.IgnoreAction) {
                                         rectangleToMove.defaultState = false
                                         console.log("Accepted.")
                                         console.log("rectangleToMove.defaultState=false")
                                     } else {
                                         console.log("Rejected. Shifting to original place.")
                                         rectangleToMove.defaultState = true
                                         console.log("rectangleToMove.defaultState=true")
                                     }
                                 } else {
                                     console.log("dragHandler active")
                                     rectangleToMove.defaultState = true
                                 }
            }
            states: [
                State {
                    name: "STATE defaultState dropArea"
                    when: rectangleToMove.defaultState
                          && rectangleToMove.parent === dropArea
                    PropertyChanges {
                        target: root
                        color: "green"
                    }
                    PropertyChanges {
                        target: dropArea
                        z: 4
                    }
                    StateChangeScript {
                        script: console.log("STATE defaultState dropArea")
                    }
                },
                State {
                    name: "STATE defaultState dropArea1"
                    when: rectangleToMove.defaultState
                          && rectangleToMove.parent === dropArea1
                    PropertyChanges {
                        target: root
                        color: "green"
                    }
                    PropertyChanges {
                        target: dropArea1
                        z: 4
                    }
                    StateChangeScript {
                        script: console.log("STATE defaultState dropArea1")
                    }
                },
                State {
                    name: "STATE defaultState"
                    when: rectangleToMove.defaultState
    
                    PropertyChanges {
                        target: root
                        color: "green"
                        z: 4
                    }
    
                    StateChangeScript {
                        script: console.log("STATE defaultState")
                    }
                },
    
                State {
                    name: "parent of rectangleToMove dropArea"
                    when: rectangleToMove.parent === dropArea
                    PropertyChanges {
                        target: dropArea
                        z: 3
                        colorChild: "green"
                    }
                    PropertyChanges {
                        target: rectangleToMove
                        //                        anchors.verticalCenter: rectangleToMove.parent.verticalCenter
                        //                        anchors.horizontalCenter: rectangleToMove.parent.horizontalCenter
                        x: 75 - (rectangleToMove.width / 2)
                        y: 75 - (rectangleToMove.height / 2)
                    }
                    StateChangeScript {
                        script: console.log(
                                    "STATE parent of rectangleToMove dropArea")
                    }
                },
                State {
                    name: "parent of rectangleToMove dropArea1"
                    when: rectangleToMove.parent === dropArea1
                    PropertyChanges {
                        target: dropArea1
                        z: 3
                        colorChild: "green"
                    }
                    PropertyChanges {
                        target: rectangleToMove
                        //                        anchors.verticalCenter: rectangleToMove.parent.verticalCenter
                        //                        anchors.horizontalCenter: rectangleToMove.parent.horizontalCenter
                        x: 75 - (rectangleToMove.width / 2)
                        y: 75 - (rectangleToMove.height / 2)
                    }
                    StateChangeScript {
                        script: console.log(
                                    "STATE parent of rectangleToMove dropArea1")
                    }
                }
            ]
        }
    }
    

    }


Log in to reply