Qt 如何在QML中将项拖动到ListView外部

我正在开发一个QML应用程序，它基本上包含两个ListView。我想将QML项从一个ListView复制到另一个ListView。我试图通过在委托中设置Drag属性来处理此问题，但当我拖动项目时，项目无法超出视图，我认为Flickable容器可以处理鼠标事件。
因此，我想尝试以下方法：

• 创建与列表视图重叠的鼠标earea
• 通过调用**createComponent（）/createObject（）创建新对象**
• 将此对象重新复制到mousearea
• 在mousearea中处理鼠标事件，直到鼠标落下

这个解决方案在我看来有点复杂，所以你有更好的方法来实现这一点吗

---

这是个坏主意，太复杂了。我想我有办法做到这一点：

• ListView的每个委托都有一个可以拖动的隐藏项，
• 由于我的ListView位于可重用组件中，因此我使用属性传递更高的项（此处为矩形，而非**MouseArea**），该项可用作拖动项的父项，
• 较高的项包含两个ListView（将来可能会更多），
• 开始拖动时，项目将设置为可见，并使用**状态重新租用**

---

因此，我错过了设置家长应该解决我的问题的要点。

下一个代码只是一个想法，但关键是在

代理中有一个
MouseArea
，用于第一个
列表视图
，这样用户就可以将项目拖放到属于第二个
列表视图的
拖放区

在本例中，
model
非常简单，只是一个数字。当项目被删除时，它将从第一个
列表视图中删除：

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

导入QtQuick 2.5
导入QtQuick.Window 2.2
窗口{
可见：正确
宽度：600
身高：600
长方形{
id:根
宽度：400
身高：400
列表视图{
id:listView
宽度：parent.width/2
高度：parent.height
属性int dragItemIndex:-1
模型：ListModel{
Component.onCompleted：{
对于（变量i=0；i<10；++i）{
追加（{value:i}）；
}
}
}
代表：议程项目{
id:delegateItem
宽度：listView.width
身高：50
长方形{
id:dragRect
宽度：listView.width
身高：50
anchors.horizontalCenter:父级.horizontalCenter
anchors.verticalCenter:父级.verticalCenter
颜色：“鲑鱼”
border.color:Qt.较深（颜色）
正文{
anchors.centerIn:父对象
文本：modelData
}
鼠耳{
id:mouseArea
锚定。填充：父级
drag.target:dragRect
drag.onActiveChanged：{
如果（mouseArea.drag.active）{
listView.dragItemIndex=索引；
}
dragRect.Drag.drop（）；
}
}
国家：[
陈述{
时间：dragRect.Drag.active
换父母{
目标：拖网
父：根
}
主播变更{
目标：拖网
anchors.horizontalCenter:未定义
.verticalCenter:未定义
}
}
]
Drag.active:mouseArea.Drag.active
Drag.hotSpot.x:dragRect.width/2
Drag.hotSpot.y:dragRect.height/2
}
}
}
列表视图{
id:listView2
宽度：parent.width/2
高度：parent.height
anchors.right:父项.right
属性int dragItemIndex:-1
下降区{
id:dropArea
锚定。填充：父级
onDropped：{
listView2.model.append（listView.model.get（listView.dragItemIndex））
listView.model.remove（listView.dragItemIndex）
listView.dragItemIndex=-1；
}
}
模型：ListModel{
Component.onCompleted：{
对于（变量i=0；i<1；++i）{
追加（{value:i}）；
}
}
}
代表：议程项目{
id:delegateItem2
宽度：listView2.width
身高：50
长方形{
编号：dragRect2
宽度：listView2.width
身高：50
anchors.horizontalCenter:父级.horizontalCenter
anchors.verticalCenter:父级.verticalCenter
颜色：“鲑鱼”
border.color:Qt.较深（颜色）
正文{
anchors.centerIn:父对象
文本：modelData
}
}
}
}
}
}
我一直在研究一些想法，我已经将代码提交给GitHub。我不知道你的列表模型-在上传的代码中非常简单-如果我正确理解了这个问题，