在QML开发中，ListView是我们经常用到的控件，可以用它给用户展示出列表，但是往往都是将项目的显示顺序排好后，直接让ListView显示出来，亦或者是知道要移动到具体的那一位置，然后调整数据在ListView中的顺序来达到要求，现有一种需求，就是用鼠标拖动某项，动态去改变某一项在ListView中显示的顺序位置，经过研究及实践实战，实现方式的核心代码如下：
import QtQuick 2.4 import QtQuick.Controls 1.3 import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2 Rectangle { width: 800 height: 600 ListModel{ id: objmodel ListElement{ name: "小米" cost: "2500" manufacturer: "小米公司" } ListElement{ name: "苹果" cost: "5000" manufacturer: "Apple公司" } ListElement{ name: "小米2" cost: "2000" manufacturer: "小米公司" } ListElement{ name: "三星" cost: "3000" manufacturer: "三星公司" } ListElement{ name: "华为" cost: "3000" manufacturer: "华为公司" } ListElement{ name: "ViVo" cost: "3000" manufacturer: "ViVo公司" } } Component { id: com_delegate Item { id: wrapper width: parent.width height: 30 Rectangle { id: bgColor anchors.fill: parent color: "transparent" } Row{ anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter spacing: 8 Text { id: coll text: name color: wrapper.ListView.isCurrentItem? "red":"black" font.pixelSize: 20 } Text { text: cost color: wrapper.ListView.isCurrentItem? "red":"black" font.pixelSize: 20 } Text { text: manufacturer color: wrapper.ListView.isCurrentItem? "red":"black" font.pixelSize: 20 } } MouseArea { id: mousearea anchors.fill: parent onClicked: { listview.currentIndex = index; } onPressed: { bgColor.color = "blue" } onReleased: { bgColor.color = "transparent" } onMouseXChanged: { var pore = listview.indexAt( mousearea.mouseX + wrapper.x, mousearea.mouseY + wrapper.y ); if( index != pore ) { objmodel.move( index, pore , 1) } } onMouseYChanged: { var pore = listview.indexAt( mousearea.mouseX + wrapper.x, mousearea.mouseY + wrapper.y ); if( index != pore ) { objmodel.move( index, pore , 1) } } } } } property int n_flag: 0 ListView { id: listview anchors.centerIn:parent width: 300 height: 300 delegate: com_delegate model:objmodel interactive: false focus: true function move_down() { if( ( n_flag == 0 ) && ( currentIndex+1 ) < model.count ) { model.move( currentIndex, currentIndex+1, 1) } if( n_flag == 1 && ( currentIndex-1 ) >= 0) { model.move( currentIndex, currentIndex-1, 1) } if( currentIndex -1 == 0 ) { n_flag = 0; } if( currentIndex + 1 == model.count ) { n_flag = 1 } } move: Transition { NumberAnimation { properties: "x,y"; duration: 100 } } } Rectangle { anchors.bottom: parent.bottom width: 100 height: 100 border.width: 0.6 MouseArea { anchors.fill: parent onClicked: { console.log( listview.currentIndex ) listview.move_down() } } } }鼠标拖动某项到指定的ListView中的某位置，然后放开鼠标，该项就移动到指定位置了。
左下角的框代表一个按钮（虽然丑了点，说明问题就行^__^）,点击可以改变项的显示位置。
具体的效果图自己脑补，是在不行，直接拷贝以上代码，用qmlscene运行，就可看到效果了。
