[SOLVED] Dropping a new item into a drag-droppable GridView

frankiefrank

I am trying to modify the GridView drag & drop example provided here:
http://doc.qt.io/qt-5/qtquick-draganddrop-example.html

I'm using Qt 5.4, QtQuick 2.4, QtQml.Models 2.1.

The existing code allows drag and drop within the GridView. My desired additional functionality: drag a new (external) item into the grid view so that it would be inserted into the model in the proper position.

I added this external item (note, topRect is the root rectangle, with width: 520; height: 600)
@
Rectangle {
id: sourceRect
z:9
color: "blue"

    width: 80; height: 80
    x: topRect.width - 80
    y: 0
    Drag.active: dragArea.drag.active
    Drag.hotSpot.x: 40
    Drag.hotSpot.y: 40
    Drag.source: topRect

    MouseArea {
        id: dragArea
        anchors.fill: parent
        drag.target: parent
    }
}

@

I added a small indicator to the rectangle, to see where insertion would take place.
@
Rectangle {
id: indicatorRect
width: 10
height: icon.height
anchors.top: icon.top
anchors.left: icon.left
color: "green"
visible: false
}
@

And this is my modified DropArea part of the delegate:
@
DropArea {
anchors { fill: parent; margins: 15 }
onEntered: {
if (drag.source.visualIndex === undefined)
{
indicatorRect.visible = true;
}
else
visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex)
}

onDropped:
{
console.log("Dropped...") // PROBLEM: this never happens
}

onExited:
{
if (drag.source.visualIndex === undefined)
{
indicatorRect.visible = false;
}
}
}
@

The problem: the onDropped code is not called. My entered/exited correctly shows/hides the indicator rectangle but when I stop dragging, I don't get the onDropped line to hit.

p3c0

Hi,

You need to call "drop()":http://doc.qt.io/qt-5/qml-qtquick-drag.html#drop-method to end the sequence which will then trigger the onDropped slot. So for sourceRect
@
Rectangle {
id: sourceRect
...
onReleased: sourceRect.Drag.drop()
}
@

frankiefrank

Thanks! I guess you meant the MouseArea though, that's the one that has the onReleased handler.

I'm still having issues with the actual inserting of the item. Here's my onDropped code:
@
console.log("inserting black square at index " + delegateRoot.visualIndex)
visualModel.items.insert(delegateRoot.visualIndex, {"color": "black"});
@

I have some unexpected behavior when I try to drop my rectangle at index 0, and then at index 1. The second drop causes a white square to be created. What's more weird, I can't seem to access the actual updated model. This code:
@
console.log("** current model **")
for (var i = 0; i < visualModel.model.count; i++)
{
console.log(i + " - " + visualModel.model.get(i).color);
}
@

always prints out the contents of the original model in the original order.

frankiefrank

Looks like I got the desired behavior, by using visualModel.model instead of visualModel.items. I just had to update the call to move() and add the number of items to move (1).

@
visualModel.model.move(drag.source.visualIndex, delegateRoot.visualIndex, 1)
@

Got to admit that docs about DelegateModel are throwing me off in some unknown fields and I get confused (groups, parts...)

http://doc-snapshot.qt-project.org/qt5-5.4/qml-qtqml-models-delegatemodel.html

frankiefrank

Found this helpful (in retrospect) part in a tutorial page:
http://doc-snapshot.qt-project.org/qt5-5.4/qtquick-tutorials-dynamicview-dynamicview3-example.html

bq. The items property of DelegateModel provides access to the view's items and allows us to change the visible order without modifying the source model.

This is why my model wouldn't change.

p3c0

bq. Thanks! I guess you meant the MouseArea though, that’s the one that has the onReleased handler.

Yes, exactly ;)