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

[werto87]

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")
                }
            }
        ]
    }
}

}