Drag and Drop using QML with Flow
Moved
Unsolved
QML and Qt Quick
-
wrote on 16 Feb 2017, 15:55 last edited by A Former User
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. -
wrote on 6 Mar 2017, 08:13 last edited by
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.