Hi
I'm making a UI with QML. This is for desktop environments so I'm talking about
mice and clicking here - bare with me.
I want to acchieve the following kind of interaction. Consider there are two
Items on the UI, let's call them widgets. Both of these widgets need to be
clickable. This is the usual kind of clicking that can be recognized with a
MouseArea's onClicked handler. So far so good.
What I also need to recognize is that when the first widget is pressed, then
the pointer is moved on top of the second widget and then the mouse button is
released. The dragging can also happen the other way so this needs to work both
ways. So I need to recognize on top of what widget the mouse button was pressed
and on top of what widget it was released.
In the real UI there's a variable number of these widgets so they come and go.
But the basic problem can be described as above.
I did a small experiment with two widgets. It's attached below. This experiment
doesn't have the dynamic nature of the real UI, it only has two widgets.
Clicking them changes the color. Dragging between them shows a text in which
direction the dragging happened.
Now my question is: is it really this hard to achieve this kind of interaction
with QML (<=1.1) or am I missing something obvious?
PS. What I also tried and didn't work:
1. the widget that was pressed (and is now receiving mouse events) sets the
mouse.accepted to false in the onReleased handler if containsMouse is false. I
was hoping that the event would then propagate to other items. But the
documentation says that this doesn't work and that seems to be true.
2. in a widget's onPressed handler set mouse.accepted to false. Then the
pressed widget wouldn't eat all the mouse events. But this destroyed the
clicking functionality -> discarded.
Br, Aki
import QtQuick 1.1
Rectangle {
id: root
width: childrenRect.width
height: childrenRect.height
property bool dragged: false
property int fromName: 0
property int toName: 0
property variant pressedItem: null
Rectangle {
id: rect1
color: down ? "green" : "blue"
width: 100
height: 100
property int name: 1
property bool down: false
MouseArea {
anchors.fill: parent
hoverEnabled: root.pressedItem != null
onClicked: rect1.down = !rect1.down
onPressed: {
root.dragged = false
root.pressedItem = rect1
}
onReleased: {
if (root.pressedItem && root.pressedItem.name == rect1.name &&
containsMouse) {
root.pressedItem = null
}
}
onEntered: {
if (root.pressedItem && root.pressedItem.name != rect1.name) {
root.dragged = true
root.fromName = root.pressedItem.name
root.toName = rect1.name
root.pressedItem = null
}
}
}
}
Rectangle {
id: rect2
color: down ? "purple" : "red"
width: 100
height: 100
anchors.left: rect1.right
anchors.leftMargin: 50
property int name: 2
property bool down: false
MouseArea {
anchors.fill: parent
hoverEnabled: root.pressedItem != null
onClicked: rect2.down = !rect2.down
onPressed: {
root.dragged = false
root.pressedItem = rect2
}
onReleased: {
if (root.pressedItem && root.pressedItem.name == rect2.name &&
containsMouse) {
root.pressedItem = null
}
}
onEntered: {
if (root.pressedItem && root.pressedItem.name != rect2.name) {
root.dragged = true
root.fromName = root.pressedItem.name
root.toName = rect2.name
root.pressedItem = null
}
}
}
}
Text {
text: "Dragged " + root.fromName + " to " + root.toName
visible: root.dragged
anchors.top: rect1.bottom
anchors.topMargin: 30
}
}_______________________________________________
Qt-qml mailing list
[email protected]
http://lists.qt.nokia.com/mailman/listinfo/qt-qml
