Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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

  • Qt Champions 2017

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

  • Moderators

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


Log in to reply