Drag keys don't seem to work

pderocco

(QtQuick 2.12 on Windows)

I'm trying to drag something invisible, and take advantage of the keys property in DropArea and the Drag.keys property in the Item I'm dragging. The DropArea generates events if it has an empty keys, but if I put anything into it, it doesn't respond at all, even if the dragged Item has matching keys.

Here's Mybutton.qml:

import QtQuick 2.12

Rectangle {
    height:                 100
    width:                  100
    color:                  "white"
    property var keys:      []

    DropArea {
        anchors.fill:           parent
        keys:                   parent.keys
        onEntered:              console.log("entered", keys)
        onExited:               console.log("exited", keys)
        onDropped:              console.log("dropped", keys)
        }

    MouseArea {
        id:                     mouse
        anchors.fill:           parent
        drag.target:            message
        onPressed: {
            message.x = parent.x + mouse.x
            message.y = parent.y + mouse.y
            message.keys = parent.keys
            message.Drag.active = Qt.binding(
                    function() { return drag.active })
            }
        }
    }

and here's main.qml:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible:    true
    width:      400
    height:     400
    title:      qsTr("TestDrag")
    color:      "black"

    Item {
        id:                     message
        width:                  1
        height:                 1

        property var keys:      []
        Drag.keys:              keys
        Drag.dragType:          Drag.Automatic
        Drag.onDragStarted:     console.log("started", Drag.keys)
        Drag.onDragFinished:    console.log("finished", dropAction)

        onXChanged:             console.log(x, y)
        }

    MyButton { x: 50;  y: 50;  keys: [ "top", "left" ] }
    MyButton { x: 250; y: 50;  keys: [ "top", "right" ] }
    MyButton { x: 50;  y: 250; keys: [ "bottom", "left" ] }
    MyButton { x: 250; y: 250; keys: [ "bottom", "right" ] }
    }

This puts up four squares, and I should be able to drag any one onto the adjacent ones, but not the opposite corner because it doesn't share any keys. But I can't drag anything onto anything. If I comment out the keys on one of the buttons, then I can obviously drop any of the others onto it, proving that the invisible Item is actually being dragged where I think it is.

The documentation is pretty unclear, so I expect I'm probably doing something wrong. But what?

Or is there a simpler way to do drag and drop, if I don't want to drag an actual visual item? I just want the cursor to change shape based on whether it's over something it can drop on.