Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple example to show how to move an object with a drag target on a MouseArea without breaking the model link for (x, y) values. The solution is States. I use StateGroups because it's a good pratice to use StateGroups instead of the default state when creating a reusable component. There is no specific reason for this example.
import QtQuick 1.1
Rectangle {
id: mainWindowId
implicitWidth: 500
implicitHeight: 500
anchors.fill: parent
color: "black"
QtObject {
id: m
property real modelPosX: 50
property real modelPosY: 20
}
MouseArea {
anchors.fill: parent
onReleased: {
console.log("mainWindowId onReleased")
// some external changes modify the model pos value
m.modelPosX = m.modelPosX + 10
}
}
Rectangle {
id: nodeId
width: 50
height: 50
color: "blue"
StateGroup {
id: stateMoving
state: "normal"
states: [
State {
name: "normal"
PropertyChanges { target: nodeId; x: m.modelPosX; y: m.modelPosY }
},
State {
name: "moving"
PropertyChanges { target: nodeId; x: m.modelPosX; y: m.modelPosY }
}
]
}
StateGroup {
id: statePressed
states: [
State {
name: "pressed"
when: nodeMouseArea.pressed
PropertyChanges { target: nodeId; opacity: .5 }
}
]
}
MouseArea {
id: nodeMouseArea
anchors.fill: parent
drag.target: parent
drag.axis: Drag.XandYAxis
onPressed: {
console.log("nodeId onPressed")
stateMoving.state = "moving"
}
onReleased: {
console.log("nodeId onReleased")
stateMoving.state = "normal"
}
}
}
}
@eprana

This comment has been minimized.

Copy link

eprana commented Jan 14, 2013

Je suis en train de regarder l'exemple mais je ne comprends pas comment il fonctionne. Dans les states moving et normal, on applique les même changements. Lorsqu'on relâche le carré bleu, il revient à sa position initiale.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.