Как перетащить элемент за пределы ListView в QML

Question

Я занимаюсь разработкой приложения QML, которое в основном содержит два ListView. Я хотел бы скопировать элемент QML из одного ListView в другой. Я попытался справиться с этим, установив свойство Drag в делегате, но элемент не может выходить за пределы представления при перетаскивании элемента, я думаю, что контейнер Flickable обрабатывает события мыши.
Итак, я хочу попробовать следующее:

• создать мышеловку, которая перекрывает список
• создать новый объект, вызвав **createComponent() / createObject()**
• Перекрасить этот объект в мышеловку
• обрабатывать события мыши в мышиной области до момента падения

Это решение кажется мне немного сложным, так у вас есть лучший способ добиться этого?

---

Это была плохая идея и слишком сложная. Я думаю, у меня есть способ добиться этого:

• каждый делегат ListView имеет скрытый элемент, который можно перетаскивать,
• так как мой ListView находится в повторно используемом компоненте, я использую свойство для передачи более высокого элемента (прямоугольник здесь, а НЕ ** MouseArea **), который можно использовать в качестве родительского для перетаскиваемых элементов,
• более высокий элемент содержит два ListView (и, возможно, больше в будущем),
• когда начинается перетаскивание, элемент становится видимым и перерисовывается, используя ** состояние **

Итак, я упустил момент, когда родитель должен решить мою проблему.

Answer 1

Следующий код это просто идея, но ключ к MouseArea внутри delegate для первого ListView так что пользователь может перетащить элементы и бросить их в DropArea который принадлежит второму ListView,

В этом примере model это очень просто, просто число. И когда предмет уронен, он удаляется с первого ListView:

listView.model.remove(listView.dragItemIndex)

Просто удалите эту строку кода, чтобы скопировать элемент вместо удаления.

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