QML中鼠标拖动移动ListView中项的位置

在QML开发中，ListView是我们经常用到的控件，可以用它给用户展示出列表，但是往往都是将项目的显示顺序排好后，直接让ListView显示出来，亦或者是知道要移动到具体的那一位置，然后调整数据在ListView中的顺序来达到要求，现有一种需求，就是用鼠标拖动某项，动态去改变某一项在ListView中显示的顺序位置，经过研究及实践实战，实现方式的核心代码如下：

import QtQuick 2.4import QtQuick.Controls 1.3import QtQuick.Window 2.2import QtQuick.Dialogs 1.2Rectangle {    width: 800    height: 600    ListModel{        id: objmodelListElement{            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: 30Rectangle {id: bgColoranchors.fill: parentcolor: "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: listviewanchors.centerIn:parentwidth: 300height: 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运行，就可看到效果了。