Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Drag and Drop using QML with Flow
Forum Updated to NodeBB v4.3 + New Features

Drag and Drop using QML with Flow

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 1.2k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R_ramR Offline
    R_ramR Offline
    R_ram
    wrote on last edited by A Former User
    #1

    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.

    1 Reply Last reply
    0
    • L Offline
      L Offline
      luca
      wrote on last edited by
      #2

      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.

      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved