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.