qml实现listview的拖动排序

### QML ListView 拖动排序实现 在QML中，`ListView` 组件支持通过自定义行为来实现拖动排序功能。为了实现这一特性，可以利用 `MouseArea` 和 `Drag` API 来处理触摸事件并重新排列模型中的条目。 #### 使用 MouseArea 处理拖放操作 每个列表项可以通过嵌入 `MouseArea` 来响应鼠标点击和移动事件。当检测到按下动作时启动拖动过程；释放按钮则结束该过程，并更新模型以反映新的位置： ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 ApplicationWindow { visible: true width: 640; height: 480 ListModel { id: listModel ListElement { name: "Alice"; number: "+1 (555) 010" } ListElement { name: "Bob"; number: "+1 (555) 011" } ListElement { name: "Charlie"; number: "+1 (555) 012" } } Component { id: delegateComponent Rectangle { color: "#f0f0f0" border.color: drag.active ? "blue" : "black" Text { anchors.centerIn: parent text: model.name + "\n" + model.number } Drag.active: mouseArea.drag.active MouseArea { id: mouseArea anchors.fill: parent drag.target: parent onPressed: { indexBeingMoved = index; originalIndex = index; } onReleased: { var newIndex = Math.floor((mouseY - listView.contentY) / itemHeight); if(newIndex != originalIndex){ let tempData = listModel.get(indexBeingMoved); listModel.remove(indexBeingMoved, 1); listModel.insert(newIndex, tempData); listView.positionViewAtIndex(newIndex, ListView.Center); } } } property int itemHeight: 70 } } ListView { id: listView anchors.fill: parent model: listModel delegate: delegateComponent spacing: 5 clip: true } } ``` 此代码片段展示了如何创建一个简单的联系人列表视图[^1]，其中每一项都可以被用户按住并上下滑动调整其所在的位置。一旦松开手指或鼠标按键，则会计算目标索引并将对应的数据元素移至新位置。