Draggable items not working in QML

Question

I'm trying to implement basic drag n' drop in QML. Functionally, it works -- I'm able to drag a string around. However, I can't get my draggable Rectangle object to follow the cursor. It sets the Rectangle's x and y properly the frame that it becomes visible, but then it remains stationary rather than move with the mouse. Here is my code:

MouseArea {
    id: mouseArea
    anchors.fill: parent
    drag.target: draggable
}

Rectangle {
    id: draggable
    height: 18
    width: dragText.width + 8
    clip: true
    color: "#ff333333"
    border.width: 2
    border.color: "#ffaaaaaa"
    visible: false
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter

    Drag.active: mouseArea.drag.active
    Drag.hotSpot.x: 0
    Drag.hotSpot.y: 0
    Drag.mimeData: { "text/plain": "Teststring" }
    Drag.dragType: Drag.Automatic
    Drag.onDragStarted: {
        visible = true
    }
    Drag.onDragFinished: {
        visible = false
    }

    Text {
        id: dragText
        x: 4
        text: "Teststring"
        font.weight: Font.Bold
        color: "#ffffffff"
        horizontalAlignment: Text.AlignHCenter
    }
}

What are you going to do here? Do you try to drag an item with `visible: false`? — folibis, Dec 03 '16 at 06:51
No, I set the item to visible as soon as dragging starts (see Drag.onDragStarted). — user1765354, Dec 05 '16 at 21:16
What sense in dragging invisible item? What is your target? Perhaps that could be done in another way. — folibis, Dec 06 '16 at 06:30
The visibility doesn't matter. If I set the object to visible, it still doesn't drag correctly. I was just hiding the drag object until you start dragging. — user1765354, Dec 07 '16 at 18:16

DuKes0mE · Answer 1 · 2016-12-06T09:46:25.087

1

Your rectangle is not moving, because you set anchors to your Rectangle. Anchors are intended to be set stationary to the anchoring point.

Remove

anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter

in your QML.

If you want to place it in the center of the parent, you would need to set it like this instead:

x: parent.width / 2 - this.width / 2
y: parent.height / 2 - this.height / 2

You may also want to remove

Drag.dragType: Drag.Automatic

if the rectangle should follow your cursor, rather than only moving, after the drag ended.

edited Dec 06 '16 at 09:46

answered Dec 06 '16 at 09:33

DuKes0mE

1,101
19
30

1

So, I'm still having some issues. When I remove Drag.dragType: Drag.Automatic, the rectangle moves around properly, but the "drag" state never hits. Therefore, I have to choose between actually dragging text (functionality) vs. the rectangle moving with the cursor (visualization.) I'd like both. – user1765354 Dec 12 '16 at 18:27
like the anonymous user above, I would love a solution that both drags normally AND fires drag events and triggers the drag state – Sparr Dec 17 '18 at 21:37

score 0 · Accepted Answer · answered Dec 13 '16 at 00:36

I ended up solving this by avoiding the Draggable framework altogether and basically just using workarounds. I added the following to my MouseArea to make the rectangle move around properly:

onMouseXChanged: {
    draggable.x = mouseX - draggable.width/2
}
onMouseYChanged: {
    draggable.y = mouseY - draggable.height/2
}

To emulate dropping functionality, I programatically calculate the position of the "drop area," compare it to the mouse position with rudimentary collision detection, and then append to the ListView that's attached to the "drop area."

Draggable items not working in QML

2 Answers2