Drag and Drop using QML with Flow
Moved
Unsolved
QML and Qt Quick
-
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. -
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.