Drag and Drop using QML with Flow

R_ram

Using Flow container to show something to user, I would like to drag and drop the items inside that flow so that they need to change their position between themselves like swap

my code goes here:

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    id: win
    width: 800
    height: 600
    title: "drag & drop"
    visible: true

    Component {
        id: componentId
        Rectangle {
            id: rect
            width: 100
            height: 100
            z: mouseArea.drag.active ||  mouseArea.pressed ? 2 : 1
            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
            property point beginDrag
            property bool caught: false
            border { width:2; color: "white" }
            radius: 5
            Drag.active: mouseArea.drag.active

            Text {
                anchors.centerIn: parent
                text: name
                color: "white"
            }
            MouseArea {
                id: mouseArea
                anchors.fill: parent
                drag.target: parent
                onPressed: {
                    rect.beginDrag = Qt.point(rect.x, rect.y);
                }
                onReleased: {
                    if(!rect.caught) {
                        backAnimX.from = rect.x;
                        backAnimX.to = beginDrag.x;
                        backAnimY.from = rect.y;
                        backAnimY.to = beginDrag.y;
                        backAnim.start()
                    }
                }
            }
            ParallelAnimation {
                id: backAnim
                SpringAnimation { id: backAnimX; target: rect; property: "x"; duration: 500; spring: 2; damping: 0.2 }
                SpringAnimation { id: backAnimY; target: rect; property: "y"; duration: 500; spring: 2; damping: 0.2 }
            }
        }
    }

    ListModel {
        id: listModelId
        ListElement {
            name: "Apple"
        }
        ListElement {
            name: "Orange"
        }
        ListElement {
            name: "Banana"
        }
    }

    Flow {
        id: flowId
        anchors.fill: parent
        Repeater {
            model: listModelId
            delegate: componentId
        }
    }
}

In the above example if i drag "Apple" and drop on "Orange" both needs to get swapped inside Flow.
Is that possible to get that in flow or need to go with someother components
Thank you.

luca

Don't know if it helps but in the examples folder of Qt source there are some buildable examples that helped me some times ago.
Here you can fine some explanations . It doesn't use flow but it probably works the same way...

In particular I used GridView Example at the end of the page.