listview 拖拽

import QtQuick 2.12
import QtQuick.Window 2.12

//演示ListView的拖拽移动
Window {
    width: 360
    height: 520
    visible: true
    title: qsTr("ListView Move")



    Rectangle {
        width: 800
        height: 600

        ListModel {
            id: objmodel
            ListElement{
                name: "苹果"
                cost: "5000"
                manufacturer: "Apple公司"
            }
            ListElement{
                name: "小米2"
                cost: "2000"
                manufacturer: "小米公司"
            }
            ListElement{
                name: "三星"
                cost: "3000"
                manufacturer: "三星公司"
            }
        }

        property int first_index: -1
        property int last_index: -1

        Component {
            id: phone_delegate

            Item {
                id: wrapper
                width: parent.width
                height: 30

                Row {
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 8
                    Text {
                        id: coll
                        text: name
                        color: "black"
                        font.pixelSize: 20
                    }
                    Text {
                        text: cost
                        color: "black"
                        font.pixelSize: 20
                    }
                    Text {
                        text: manufacturer
                        color: "black"
                        font.pixelSize: 20
                    }

                }

                MouseArea {
                    id: mousearea

                    anchors.fill: parent
                    onClicked: {

                    }
                    onPressed: {

                    }
                    onReleased: {

                    }

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

        ListView {
            id: listview

            anchors.left: parent.left
            width: 300
            height: 300
            delegate: phone_delegate
            model: objmodel

            interactive: false
            focus: true

            move: Transition {
                NumberAnimation { properties: "x,y"; duration: 100 }
            }
        }

        ListModel {

            id: second_model
            ListElement {
                name: "苹果"
                cost: "5000"
                manufacturer: "Apple公司"
            }
            ListElement {
                name: "小米2"
                cost: "2000"
                manufacturer: "小米公司"
            }
            ListElement {
                name: "三星"
                cost: "3000"
                manufacturer: "三星公司"
            }
        }
        Component {
            id: android_delegate

            Item {
                id: second_wrapper

                width: parent.width
                height: 30

                Row {
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 8
                    Text {
                        id: coll
                        text: name
                        color: "black"
                        font.pixelSize: 20
                    }
                    Text {
                        text: cost
                        color: "black"
                        font.pixelSize: 20
                    }
                    Text {
                        text: manufacturer
                        color: "black"
                        font.pixelSize: 20
                    }


                }

                Text {
                    id: txt
                    text:
                        second_model.get( index ).name + " "
                        + second_model.get( index ).cost + " "
                        + second_model.get( index ).manufacturer
                    visible: false
                }

                MouseArea {
                    id: mousearea
                    anchors.fill: parent
                    drag.target: txt
                    drag.axis: Drag.XAndYAxis
                    drag.minimumX: mouseX
                    drag.maximumX: 0
                    drag.minimumY: mouseY
                    drag.maximumY: second_wrapper.height

                    onClicked: {

                    }
                    onPressed: {
//                        pre_index = second_view.currentIndex


                    }
                    onReleased: {

                    }

                    onMouseXChanged: {

                    }
                    onMouseYChanged: {

                    }
                }
            }

        }

        property int n_flag: 0

        ListView {
            id: second_view

            anchors.left: listview.right
            width: 300
            height: 300
            delegate: android_delegate
            model: second_model

            interactive: false
            focus: true
            function move_down() {

                if( ( n_flag == 0 ) && ( currentIndex+1 ) < second_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 == second_model.count ) {
                    n_flag = 1
                }

            }

            move: Transition {
                NumberAnimation {properties: "x,y"; duration: 100;}
            }
        }

        Rectangle {
            anchors.bottom: parent.bottom
            anchors.right: parent.right
            width: 100
            height: 100
            border.width: 0.6
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log( second_view.currentIndex )
                    second_view.move_down()
                }
            }

        }
    }
}