QML: MouseArea pressed and mouseover

Question

There is a small thing that I absolutely need for the application that I am developing: I must be able to drag an object to another, and at least one of them should notice that they intersect. So, I want to say that one of the elements should receive the onEntered eventhoug signal, which the mouse clicked on the outside.

For instance:

import QtQuick 1.0 Rectangle{ id: base width: 500 height: 500 MouseArea{ //Even without this mousearea I don't get what i want. anchors.fill: parent //onPressed:{console.log("big")} } Rectangle{ id: t width: 100 height: 100 color: "red" MouseArea{ anchors.fill: parent hoverEnabled: true onPressed:{console.log("little-press")} onEntered:{console.log("little-enter")} drag.target: t } } } 

I want to click the mouse button outside the red square and move it without releasing the button. When the mouse passes over the red rectangle, I want the onEntered signal to be emitted. I don’t understand why it doesn’t stand out, because onEntered should only care about the mouse inside mouseArea, not the buttons.

Any idea how to do this?

Thank you very much.

Answer 1

Your code does not work, because at the moment one area of ​​the mouse will be higher than another, mouse events will be occupied only by the area of ​​the mouse that is at the top (until you change the theft property, etc.). Thus, your property of the bottom rectangle, for example, hover, etc., will not work, because all these events will be captured by the top rectangle.

Instead, try the following:

 import QtQuick 1.0 Rectangle { id: topParent width: 500 height: 500 color: "grey" Rectangle { id: redRectangle color: "red" width: 80 height: 80 onXChanged: { if( redRectangle.x > greenRectangle.x - redRectangle.width && redRectangle.x < greenRectangle.x + greenRectangle.width && redRectangle.y > greenRectangle.y - redRectangle.height && redRectangle.y < greenRectangle.y + greenRectangle.height ) { console.log ( "Red Over Green" ) } } MouseArea { anchors.fill: parent drag.target: redRectangle drag.axis: Drag.XandYAxis drag.minimumX: 0 drag.maximumX: topParent.width drag.minimumY: 0 drag.maximumY: topParent.height onPressed: redRectangle.z = greenRectangle.z + 1 } } Rectangle { id: greenRectangle color: "green" width: 180 height: 180 onXChanged: { if( greenRectangle.x > redRectangle.x - greenRectangle.width && greenRectangle.x < redRectangle.x + redRectangle.width && greenRectangle.y > redRectangle.y - greenRectangle.height && greenRectangle.y < redRectangle.y + redRectangle.height ) { console.log ( "Green Over Red" ) } } MouseArea { anchors.fill: parent drag.target: greenRectangle drag.axis: Drag.XandYAxis drag.minimumX: 0 drag.maximumX: topParent.width drag.minimumY: 0 drag.maximumY: topParent.height onPressed: greenRectangle.z = redRectangle.z + 1 } } } 

Places where I printed messages, you can also generate signals.