Solved MouseArea covering multi items
-
Hi,
Suppose in a QML project we have defined two rectangles next to each other. How to define a MouseArea for them so that when we drag any of the two, both are dragged?
For instance, how to modify the code below to meet that objective?import QtQuick 2.12 Rectangle { id: root width: 90; height: 10 color: "red" Rectangle { width: 10; height: 90 anchors.verticalCenter: root.verticalCenter color: "red" } MouseArea { anchors.fill: root drag.target: root drag.axis: Drag.YAxis drag.minimumY: 10 drag.maximumY: 200 } }
-
Define the drag for one rectangle. Use the property bindings to set the x & y of other rectangle based on the x & y of first rectangle.
-
Hi @tomy ,i guess you can use a wrapper item which contains the two rectangles and to the wrapper item you can give a mousearea with a drag,so whenever you drag any of the one rectangle both will be dragged.
Here is the sample code:-
Item{ id: root width: 200 height: 100 z: 1 MouseArea { anchors.fill: root drag.target: root drag.axis: Drag.XAndYAxis drag.minimumY: 10 drag.maximumY: 200 drag.minimumX: 10 drag.maximumX: 200 } Rectangle { width: 100; height: 100 color: "red" anchors.left: parent.left } Rectangle { width: 100; height: 100 color: "green" anchors.right: parent.right } }
-
Thank you both.
I used this method, but the second rect won't be dragged!
(This is a component and the coordinates of it is set in main.qml)import QtQuick 2.12 Rectangle { id: first width: 90; height: 10 Rectangle { id: second width: 10; height: 90 anchors.verticalCenter: first.verticalCenter color: "red" MouseArea { anchors.fill: second anchors.margins: -second.height drag.target: second drag.axis: Drag.YAxis drag.minimumY: 10 drag.maximumY: 200 } } }
-
@tomy
something like this ?Window { visible: true width: 640 height: 200 title: qsTr("Hello World") id:root Rectangle{ id:blueTangle width: 50 height: 40 color: "blue" x: redTangle.x + redTangle.width y: redTangle.y + redTangle.height } Rectangle { id:redTangle width: 50 height: 40 color: "red" x: 0 y: 0 MouseArea { anchors.fill: parent drag.target: redTangle drag.axis: Drag.XAxis drag.minimumX: 0 drag.maximumX: root.width - redTangle.width } } }
-
@J.Hilk
Yeah, similar.I changed the code to this and it worked.
import QtQuick 2.12 Rectangle { id: first width: 90; height: 10 Rectangle { id: second width: 10; height: 90 anchors.verticalCenter: first.verticalCenter color: "red" } MouseArea { anchors.fill: second anchors.margins: -first.height drag.target: first drag.axis: Drag.YAxis drag.minimumY: 10 drag.maximumY: 200 } }
The reason for the former no to work I suppose was that, the second rectangle was dependent (in terms of coordinates) relying on the first rectangle, so setting it as the target didn't work.