利用ViewItems来管理我们ListView项之间的drag-and-drog

ViewItems是依附于一个ListView或ListItem中的属性．我们可以利用它来管理我们的ListView或ListItem中项的drag-and-drop．下面我们来通过一个简单的例程来展示如何利用它来实现一些我们需要的功能：

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "viewitems.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    Page {
        id: page
        header: PageHeader {
            title: "viewitems"
        }

        ListModel {
            id: mymodel
            ListElement { name: "images/image1.jpg" }
            ListElement { name: "images/image2.jpg" }
            ListElement { name: "images/image3.jpg" }
            ListElement { name: "images/image4.jpg" }
            ListElement { name: "images/image5.jpg" }
            ListElement { name: "images/image6.jpg" }
            ListElement { name: "images/image7.jpg" }
            ListElement { name: "images/image8.jpg" }
            ListElement { name: "images/image9.jpg" }
            ListElement { name: "images/image10.jpg" }
            ListElement { name: "images/image11.jpg" }
            ListElement { name: "images/image1.jpg" }
            ListElement { name: "images/image2.jpg" }
            ListElement { name: "images/image3.jpg" }
        }

        ListView {
            width: parent.width
            height: parent.height - page.header.height
            anchors.top: page.header.bottom

            model: mymodel
            delegate: ListItem {
                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    source: name
                    height: units.gu(8)
                    width: height
                }

                Label {
                    text: index
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                dragMode: false

                color: dragMode ? "white" : "lightgray"
                onPressAndHold: ListView.view.ViewItems.dragMode =
                                !ListView.view.ViewItems.dragMode

                onDragModeChanged: {
                    console.log("dragMode: " + dragMode)
                }
            }

            ViewItems.dragMode: true
            ViewItems.onDragUpdated: {
                if (event.status === ListItemDrag.Started) {
                    console.log("event.from: " + event.from + " " + "event.to: " + event.to)
                    if (event.from < 5) {
                        // deny dragging on the first 5 element
                        event.accept = false;
                    } else if (event.from >= 5 && event.from <= 10 ) {
                        // specify the interval
                        event.minimumIndex = 5;
                        event.maximumIndex = 10;
                    } else if (event.from > 10) {
                        // prevent dragging to the first 11 items area
                        event.minimumIndex = 11;
                    }
                } else {
                    console.log("moving ....")
                    model.move(event.from, event.to, 1);
                }
            }
        }
    }
}

我们来运行我们的代码．

在上面的实现中，我们可以通过对event.status === ListItemDrag.Started的检测来限制那些项是可以移动的，或定义它们的移动的范围．

            ViewItems.onDragUpdated: {
                if (event.status === ListItemDrag.Started) {
                    console.log("event.from: " + event.from + " " + "event.to: " + event.to)
                    if (event.from < 5) {
                        // deny dragging on the first 5 element
                        event.accept = false;
                    } else if (event.from >= 5 && event.from <= 10 ) {
                        // specify the interval
                        event.minimumIndex = 5;
                        event.maximumIndex = 10;
                    } else if (event.from > 10) {
                        // prevent dragging to the first 11 items area
                        event.minimumIndex = 11;
                    }
                } else {
                    console.log("moving ....")
                    model.move(event.from, event.to, 1);
                }
            }

在上面的例子中，当我们在最前面的５个列表项中去移动时，它根本没有反应．当为我们在５-10的范围去移动我们的项时，如果在我们drop时，落下的项不在5-10之间，也不起任何的作用．也就是说5-10之间的项只能在它们之间进行交换．如果是10以外的项，它们只能在10以外的地方进行交换．

整个项目的源码在： https://github.com/liu-xiao-guo/viewitems