How to implement overlapping target drops?

Question

Once the drop target function is activated, it is still active, even when the cursor moves to another target that is above the original return target.

Here's a QML demo: try dropping the file into gray and blue areas. Blue is never activated.

import QtQuick 2.1 Rectangle { color: "grey" width: 300 height: 300 DropArea { anchors.fill: parent onDropped: status.text = "Dropped on Grey"; } Rectangle { color: "blue" anchors.fill: parent anchors.margins: 80 DropArea { anchors.fill: parent # Never active! onDropped: status.text = "Dropped on Blue" } } Text { x: 10 y: 10 id: status text: "Nothing dropped" } } 

How can I implement delete on gray and blue rectangles?

Answer 1

You cannot do this, because as soon as you enter the gray zone, you will get focus, and (even if you hover over the blue zone) blue respiration will never receive an event.

You should make the blue zone a child of the gray droparea, but now a new problem arises: onDrop in the blue zone, the gray zone also receives the event, so you need to block the event if it was deleted on blue (i.e. using the blueDrop property):

 Rectangle { color: "grey" width: 300 height: 300 DropArea { id: greyDrop; property bool blueDrop: false; anchors.fill: parent onDropped: blueDrop ? blueDrop = false : status.text = "Dropped on Grey"; Rectangle { color: "blue" anchors.fill: parent anchors.margins: 80 DropArea { anchors.fill: parent onDropped: { status.text = "Dropped on Blue"; greyDrop.blueDrop = true; } } } } Text { id: status text: "Nothing dropped" } }