Extend MouseArea beyond component

Question

I have a Rectangle with width 1 (a line), which should be draggable:

Rectangle {
    id: recMark
    border.width: 0
    width: 1
    height: parent.height
    y: 0
    color: "red"
    opacity: 0.3
    visible: true
    MouseArea {
        anchors.fill: parent
        drag.target: recMark
        drag.axis: Drag.XAxis

    }
}

Is it possible to extend the mouse area beyond the rectangle, eg 3 pixels around it? Obviously it would be hard to hit the right pixel with the mouse.

Answer 1

You can add negative margins to the MouseArea :

MouseArea {
    anchors.fill: parent
    anchors.margins: -3
    // ...
}