import QtQuick 2.4
import Ubuntu.Components 1.3MainView {// objectName for functional testing purposes (autopilot-qt5)objectName: "mainView"// Note! applicationName needs to match the "name" field of the click manifestapplicationName: "viewitems.liu-xiao-guo"width: units.gu(60)height: units.gu(85)Page {id: pageheader: PageHeader {title: "viewitems"}ListModel {id: mymodelListElement { 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.widthheight: parent.height - page.header.heightanchors.top: page.header.bottommodel: mymodeldelegate: ListItem {Image {anchors.verticalCenter: parent.verticalCentersource: nameheight: units.gu(8)width: height}Label {text: indexanchors.horizontalCenter: parent.horizontalCenter}dragMode: falsecolor: dragMode ? "white" : "lightgray"onPressAndHold: ListView.view.ViewItems.dragMode =!ListView.view.ViewItems.dragModeonDragModeChanged: {console.log("dragMode: " + dragMode)}}ViewItems.dragMode: trueViewItems.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 elementevent.accept = false;} else if (event.from >= 5 && event.from <= 10 ) {// specify the intervalevent.minimumIndex = 5;event.maximumIndex = 10;} else if (event.from > 10) {// prevent dragging to the first 11 items areaevent.minimumIndex = 11;}} else {console.log("moving ....")model.move(event.from, event.to, 1);}}}}
}

我们来运行我们的代码．

            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 elementevent.accept = false;} else if (event.from >= 5 && event.from <= 10 ) {// specify the intervalevent.minimumIndex = 5;event.maximumIndex = 10;} else if (event.from > 10) {// prevent dragging to the first 11 items areaevent.minimumIndex = 11;}} else {console.log("moving ....")model.move(event.from, event.to, 1);}}

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