How to correctly implement overlapping drop targets?

Question

Once a drop target is activated, it's still active even when the cursor moves to another drop target that sits above the original drop target.

Here's a QML demo: Try to drop a file onto the grey and blue areas. The blue one never gets 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 could I implement dropping onto both the grey and blue rectangles?

Answer 1

You cannot do it that way because as soon as you enter the grey zone, it get focus, and (even if you hover the blue zone) blue droparea will never received the event.

You have to make the blue zone a child of the grey droparea, but now, there is a new issue : onDrop on the blue zone, the grey zone also get the event so you have to block the event if it was drop on blue (that is the use of 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"
    }
}