The QML MouseArea property doesn't handle the "target"

Question

We have a project in which there are some components and one of them is named Racket.qml which is as below:

import QtQuick 2.9

Rectangle {
    id: root
    width: 15; height: 65
    property int oldY: y
    property bool yUwards: false
    property bool yDwards: false

    onYChanged: {
        if(y > oldY)  yDwards = true
        else if (y < oldY)  yUwards = true
        oldY = y
    }

    Item {
        x: root.x - 50
        y: root.y - 50
        width: 100
        height: 200

        MouseArea {
            anchors.fill: parent
            drag.target: root
            focus: true
            hoverEnabled: true
            pressAndHoldInterval: 0
            drag.axis: Drag.YAxis
            drag.minimumY: table.y
            drag.maximumY: table.height - height - 10
        }
    }
}

I've used that component in main.qml this way:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Window {
    id: window
    title: qsTr("Test")
    color: "gray"

    Rectangle {
        id: table
        width: window.width / 1.15; height: window.height / 1.15
        x: window.x + 100; y: 10;

        Racket {
            id: blackRacket
            anchors.left: table.left
            anchors.leftMargin: width * 2
            y: height
            color: "black"
        }
        Racket {
            id: redRacket
            anchors.right: table.right
            anchors.rightMargin: width * 2
            y: height
            color: "red"
        }
      ...

My purpose was just to widen the area of the Rackets but now when I run the program I can't drag the rackets!

What can the problem be please?

Answer 1

For debugging, add a transparent Rectangle with a colored border to the MouseArea.

MouseArea {
    anchors.fill: parent
    drag.target: root
    focus: true
    hoverEnabled: true
    pressAndHoldInterval: 0
    drag.axis: Drag.YAxis
    drag.minimumY: table.y
    drag.maximumY: table.height - height - 10
    Rectangle {
        anchors.fill: parent
        color: 'transparent'
        border.color: 'black'
    }
}

You will see that the MouseArea is wrongly placed. That is, as your Item's position is relative to the Rectangle AND uses the x and y coordinates. Setting the Item's x and y directly to -50 will solve that (Line 17, 18).

However that Item is completly redundant and reduced performance. You can change the size and position of the MouseArea directly to reduce the overhead. You can also do it by anchoring with negative margins. Something along the lines of:

Rectangle {
    id: root
    width: 15; height: 65
    property int oldY: y
    property bool yUwards: false
    property bool yDwards: false
    color: 'red'

    onYChanged: {
        if(y > oldY)  yDwards = true
        else if (y < oldY)  yUwards = true
        oldY = y
    }


    MouseArea {

        anchors.fill: parent  // I anchor directly to the Rectangle
        anchors.margins: -50  // and extend the area by setting negative margins
                              // You can also modify each margin (top, left, ...) seperatly

        drag.target: root
        focus: true
        hoverEnabled: true
        pressAndHoldInterval: 0
        drag.axis: Drag.YAxis
        drag.minimumY: table.y
        drag.maximumY: table.height - height - 10
        Rectangle {
            anchors.fill: parent
            color: 'transparent'
            border.color: 'black'
        }
    }
}