Important: Please read the Qt Code of Conduct -

Drag keys don't seem to work

  • (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
            onPressed: {
                message.x = parent.x + mouse.x
                message.y = parent.y + mouse.y
                message.keys = parent.keys
       = Qt.binding(
                        function() { return })

    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.

Log in to reply