QML流布局中的拖放矩形

Question

有人知道我可以在Flow布局中四处拖动和组织项目吗？ 我已经考虑过使用listview进行拖放，但这对于Flow布局确实没有帮助。 https://doc.qt.io/qt-5/qtquick-tutorials-dynamicview-dynamicview3-example.html

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3


ColumnLayout {
    id:container
    anchors.fill: parent

    Flow {
            Layout.fillWidth: true
            spacing: 10
            padding: 5

            Repeater {
                model: 10

                Rectangle {
                    width: 60;
                    height: 60
                    border.width: 1
                    color: Qt.rgba(Math.random(),Math.random(),Math.random(),1);

                    Label {
                        text: index
                    }
                }
            }
        }

}

更新 因此，由于有另一个SO帖子，我可以在网格内移动项目。当用户拥有某项帮助时，为什么我的SequentialAnimation旋转动画不起作用？

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Dialogs 1.0
import QtQml.Models 2.3


GridView {
        anchors.fill: parent
        id: root
        width: 320
        height: 480
        cellWidth: 80
        cellHeight: 80

        displaced: Transition {
            NumberAnimation {
                properties: "x,y"
                easing.type: Easing.OutQuad
            }
            SequentialAnimation {
                NumberAnimation { properties:"rotation"; to: 2; duration: 60 }
                NumberAnimation { properties:"rotation"; to: -2; duration: 120 }
                NumberAnimation { properties:"rotation"; to:  0; duration: 60 }
                loops: Animation.Infinite;
                alwaysRunToEnd: true
            }
        }

        model: DelegateModel {
            id: visualModel

            model: ListModel {
                id: colorModel

                ListElement {
                    color: "blue"
                    itemNumber: "0"
                }
                ListElement {
                    color: "green"
                    itemNumber: "1"
                }
                ListElement {
                    color: "red"
                    itemNumber: "2"
                }
                ListElement {
                    color: "yellow"
                    itemNumber: "3"
                }
                ListElement {
                    color: "orange"
                    itemNumber: "4"
                }
                ListElement {
                    color: "purple"
                    itemNumber: "5"
                }
                ListElement {
                    color: "cyan"
                    itemNumber: "6"
                }
                ListElement {
                    color: "magenta"
                    itemNumber: "7"
                }
            }

            delegate: MouseArea {
                id: delegateRoot
                cursorShape: Qt.PointingHandCursor
                property bool held: false
                property int visualIndex: DelegateModel.itemsIndex

                width: 80
                height: 80

                drag.target: held ? icon : undefined

                onPressAndHold: {
                    console.log("clicked...")
                    held = true
                    icon.opacity = 0.5
                }
                onReleased: {
                    if (held === true) {
                        held = false
                        icon.opacity = 1
                        icon.Drag.drop()
                    } else {
                        //action on release
                    }
                }

                Rectangle {
                    id: icon
                    width: 50
                    height: 50
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                        verticalCenter: parent.verticalCenter
                    }
                    color: model.color
                    radius: 2
                    border.color: "black"
                    border.width: 1

                    Text {
                        anchors.centerIn: parent
                        text: model.itemNumber
                    }

                    Drag.active: delegateRoot.drag.active
                    Drag.source: delegateRoot
                    Drag.hotSpot.x: 36
                    Drag.hotSpot.y: 36

                    states: [
                        State {
                            when: icon.Drag.active

                            ParentChange {
                                target: icon
                                parent: root
                            }

                            AnchorChanges {
                                target: icon
                                anchors.horizontalCenter: undefined
                                anchors.verticalCenter: undefined
                            }
                        }
                    ]
                }

                DropArea {
                    id: dropArea

                    anchors {
                        fill: parent
                        margins: 15
                    }

                    onDropped: {
                        var sourceColor = colorModel.get(drag.source.visualIndex).color;
                        var sourceNumber = colorModel.get(drag.source.visualIndex).itemNumber;

                        var targetColor = colorModel.get(delegateRoot.visualIndex).color;
                        var targetNumber = colorModel.get(delegateRoot.visualIndex).itemNumber;
                        colorModel.setProperty(drag.source.visualIndex, "color", targetColor);
                        colorModel.setProperty(drag.source.visualIndex, "itemNumber", targetNumber);
                        colorModel.setProperty(delegateRoot.visualIndex, "color", sourceColor);
                        colorModel.setProperty(delegateRoot.visualIndex, "itemNumber", sourceNumber);
                    }
                }
            }
        }
    }