MouseArea covering multi items

[tomy]

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
    }
}

[dheerendra]

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.

[Shrinidhi Upadhyaya]

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
        }
    }

[tomy]

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
        }
    }
}

[J.Hilk]

@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
       }
    }
}

[tomy]

@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.