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

Drag and Drop using QML with Flow

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 1.1k 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 Offline
    R Offline
    R_ram
    wrote on 16 Feb 2017, 15:55 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 6 Mar 2017, 08:13 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