How to drag an item outside a ListView in QML

Question

I am developing a QML application which basically contains two ListView. I would like to copy a QML item from one ListView to another. I tried to handle this by setting Drag property in the delegate but the item cannot go outside the view when I drag the item, I think the Flickable container handles mouse events.
So, I want to try the following:

• create a mousearea which overlaps the to ListView
• create a new object by calling **createComponent() / createObject()**
• reparent this object to the mousearea
• handle mouse events in the mousearea till drop

This solution seems to me a little complicated, so do you have a better way to achieve this ?

---

This was a bad idea and too much complicated. I think I got a way to achieve this:

• each delegate of the ListView has a hidden Item which can be dragged,
• as my ListView are in a reusable component, I use a property to pass a higher item (a Rectangle here and NOT a **MouseArea**) which can be used as parent for dragged items,
• the higher item contains the two ListView (and maybe more in the future),
• when the drag begins, the item is set to visible and reparented using a **State**

So, I missed the point that set the parent should solve my problem.

Answer 1

Next code is just an idea, but the key is to have a MouseArea inside a delegate for the first ListView so the user can drag the items and drop them into a DropArea which belongs to the second ListView.

In this example, model is very simple, just a number. And when the item is dropped, it is removed from the first ListView:

listView.model.remove(listView.dragItemIndex)

Just remove that line of code to copy the item instead of removing.

main.qml

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 600

    Rectangle {
        id: root
        width: 400
        height: 400

        ListView {
            id: listView
            width: parent.width / 2
            height: parent.height

            property int dragItemIndex: -1

            model: ListModel {
                Component.onCompleted: {
                    for (var i = 0; i < 10; ++i) {
                        append({value: i});
                    }
                }
            }

            delegate: Item {
                id: delegateItem
                width: listView.width
                height: 50

                Rectangle {
                    id: dragRect
                    width: listView.width
                    height: 50
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    color: "salmon"
                    border.color: Qt.darker(color)

                    Text {
                        anchors.centerIn: parent
                        text: modelData
                    }

                    MouseArea {
                        id: mouseArea
                        anchors.fill: parent
                        drag.target: dragRect

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

                    states: [
                        State {
                            when: dragRect.Drag.active
                            ParentChange {
                                target: dragRect
                                parent: root
                            }

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

                    Drag.active: mouseArea.drag.active
                    Drag.hotSpot.x: dragRect.width / 2
                    Drag.hotSpot.y: dragRect.height / 2
                }
            }
        }

        ListView {
            id: listView2
            width: parent.width / 2
            height: parent.height
            anchors.right: parent.right

            property int dragItemIndex: -1

            DropArea {
                id: dropArea
                anchors.fill: parent
                onDropped: {
                    listView2.model.append(listView.model.get(listView.dragItemIndex))
                    listView.model.remove(listView.dragItemIndex)
                    listView.dragItemIndex = -1;
                }
            }

            model: ListModel {
                Component.onCompleted: {
                    for (var i = 0; i < 1; ++i) {
                        append({value: i});
                    }
                }
            }

            delegate: Item {
                id: delegateItem2
                width: listView2.width
                height: 50

                Rectangle {
                    id: dragRect2
                    width: listView2.width
                    height: 50
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    color: "salmon"
                    border.color: Qt.darker(color)

                    Text {
                        anchors.centerIn: parent
                        text: modelData
                    }
                }
            }
        }
    }
}