View Item gets dropped outside drop area in qml

Question

I implemented an Gridview and it has different images in them i need to drag items out of the grid view and place it in a DropArea. I followed How to drag an item outside a List

Answer 1

I edited your Example. As I had no Images, I changed everything to Rectangles with colors, to make it running.

For future note, it would be nice, if I could run your example from the beginning.

The main change, you are looking for is in the states. By setting a "ChangeProperty" for x and y, they will be resetted when the state changes back.

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: grid_component
            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
                        }
                    }
                ]

                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
        }
    }
}

I think it should behave as expected?

Please do not forget to accept my answer, if it is what you were looking for.