Ich habe eine Rasteransicht implementiert und sie enthält verschiedene Bilder. Ich muss Elemente aus der Rasteransicht ziehen und in einer DropArea platzieren. Ich folgteSo ziehen Sie ein Element außerhalb einer ListView in QML Aber jetzt kann mein Rasterelement überall auf die Seite gezogen werden. Ich muss dies auf die DropArea beschränken.It hat auch das Layering-Problem bei Rasterelementen. Ich versuche, die gezogene Kachel in die oberste Ansicht zu bringen. Ich bin ganz frisch zu Qt

Hier ist mein Code

import QtQuick 2.0

Item {

    id: media_item
    anchors.fill: parent



    Rectangle
    {
        y: 100
        id: holder_box
        width: 450
        height: 150
        color: "#99000000"
        radius: 5

        GridView {
            id: grid
            anchors.fill: parent
            model: mediaModel
            delegate:  Item {
                id: main_item
                width: grid.cellWidth;
                height: grid.cellHeight


                Rectangle {
                    id: item; parent: grid
                    color: mediagraphic
                    x: main_item.x; y: main_item.y
                    width: 100; height: 100;

                    Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                    Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                }
                Drag.active: mouseArea.drag.active
                Drag.hotSpot.x: main_item.width / 2
                Drag.hotSpot.y: main_item.height / 2


                MouseArea {
                    id: mouseArea
                    anchors.fill: main_item
                    drag.target: main_item

                    drag.onActiveChanged: {
                        if (mouseArea.drag.active) {
                            grid.dragItemIndex = index;
                        }
                        main_item.Drag.drop();
                    }
                }

                states: [

                    State {
                        name: 'dragged'
                        when: main_item.Drag.active
                        PropertyChanges {
                            target: main_item
                            x: x
                            y: y
                        }
                        ParentChange
                        {
                            target: main_item
                            parent: topDrag
                        }
                    }
                ]

                onStateChanged: console.log('State', state)
            }
            interactive: false
            anchors.topMargin: -30

            property int dragItemIndex: -1

        }




        ListModel {
            id: mediaModel
            ListElement { mediagraphic: "orchid"
                songname: "Song 1"}
            ListElement {mediagraphic: "pink"
                songname: "Song 2"}
            ListElement {mediagraphic: "purple"
                songname: "Song 3"}
            ListElement {mediagraphic: "lighpink"
                songname: "Song 4"}
            ListElement {mediagraphic: "blue"
                songname: "Song 5"}
            ListElement {mediagraphic: "grey"
                songname: "Song 6"}
        }


        Component
        {
            id: grid_component

            Item {
                id: main_item
                width: grid.cellWidth;
                height: grid.cellHeight


                Rectangle {
                    id: item; parent: grid
                    color: mediagraphic
                    x: main_item.x; y: main_item.y
                    width: 100; height: 100;

                    Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                    Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                }
                Drag.active: mouseArea.drag.active
                Drag.hotSpot.x: main_item.width / 2
                Drag.hotSpot.y: main_item.height / 2


                MouseArea {
                    id: mouseArea
                    anchors.fill: main_item
                    drag.target: main_item

                    drag.onActiveChanged: {
                        if (mouseArea.drag.active) {
                            grid.dragItemIndex = index;
                        }
                        main_item.Drag.drop();
                    }
                }

                states: [

                    State {
                        name: 'dragged'
                        when: main_item.Drag.active
                        PropertyChanges {
                            target: main_item
                            x: x
                            y: y
                        }
                        ParentChange
                        {
                            target: main_item
                            parent: media_item
                        }
                    }
                ]

                onStateChanged: console.log('State', state)
            }
        }

    }

    Rectangle
    {
        id: now_playing_rect
        height: parent.height
        width: parent.width/2
        x: 640
        color: "Transparent"


        DropArea
        {
            id: dropArea
            width: 200
            height: 200
            anchors.centerIn: parent
            onDropped:
            {
                song_details.text = grid.model.get(grid.dragItemIndex).songname
                selected_song_image.color =  grid.model.get(grid.dragItemIndex).mediagraphic
                mediaModel.remove(grid.dragItemIndex)
            }
        }

        Rectangle {
            id: selected_song_image
            width: 200
            height: 200
            anchors.centerIn: parent
        }

        Rectangle {
            id: next
            color: 'green'
            anchors.verticalCenter: now_playing_rect.verticalCenter
            anchors.left: dropArea.right
            width: 50
            height: 50
        }

        Rectangle {
            id: previous
            color: 'brown'
            anchors.verticalCenter: now_playing_rect.verticalCenter
            anchors.right: dropArea.left
            width: 50
            height: 50
        }

        Text {
            id: song_details
            text: qsTr("Song Title")
            anchors.top: dropArea.bottom
            font.pointSize: 30
            color: "White"
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

    Item {
        id: topDrag
        anchors.fill: parent
    }
}