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



  • 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.


  • Moderators

    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()
    }
    @



  • 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.



  • 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



  • 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.


  • Moderators

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

    Yes, exactly ;)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.