Drag the center of an item

Question

I have an Item that is a little large. I want to resize it when dragging and ensure that the center is always dragged. The following is a trial (In order for simplicity, I don't set the center of the Item to the mouse position here, neither do I change the size.), however the position x will be reset immediately after I change it. Is there any way to avoid this.

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello Quick")

    Rectangle{
        id: item_
        width: 300
        height: 300
        color: "red"

        MouseArea{
            id: drag_
            anchors.fill: parent

            drag.target: item_
        }

        states: State{
            when: drag_.drag.active
            PropertyChanges {
                target: item_

                x: 100
                y: 100
            }
        }

        onXChanged: console.log("item_.x: ", x)
    }
}

The output:

qml: item_.x:  100
qml: item_.x:  0
qml: item_.x:  1
qml: item_.x:  2
qml: item_.x:  3
qml: item_.x:  4
qml: item_.x:  5
qml: item_.x:  6
qml: item_.x:  7
qml: item_.x:  8
qml: item_.x:  10

Hi there! What is your question specifically? You mention resizing and dragging the centre but then say it's simplified. Is the problem just with the `item_.x` being displaced? — TrebledJ, Nov 19 '18 at 16:35
I think the State is giving you some troubles, when I remove it, the rectangle stays after dragging. Can you live without? — Amfasis, Nov 19 '18 at 20:26
@TrebuchetMS Resing and dragging the center is the goal. In order to drag the center, I think I need to change x first. If there exists other solutions, then changing x is not necessary. — cqdjyy01234, Nov 19 '18 at 23:45
@Amfasis perhaps not. I need to reset all properties if drop is not accepted or cancelled . — cqdjyy01234, Nov 19 '18 at 23:47
@TrebuchetMS what's more, if I don't need to change the size then I don't need to change the center as the mouse may be left outside after resizing. — cqdjyy01234, Nov 19 '18 at 23:50
@cqdjyy01234 How does your drop work? Are you using a DropArea then performing checks onDropped? — TrebledJ, Nov 20 '18 at 02:21

Drag the center of an item

0 Answers0