Drag and Drop using QML with Flow

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

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

Log in to reply

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