此演示来自official demo of drag and drop。
我做了些改变。现在,当其他矩形(包括黄色矩形)进入鼠标区域时,黄色矩形将不会移动。黄色矩形本身也不能拖动。
但是当我将青色拖入绿色rec和红色之间的区域时,一个或另一个矩形不在包括黄色rec的区域中,则黄色矩形将移动。不好。
我该如何解决?
我已经在Google上搜索了,不知道该使用哪个关键字。
import QtQuick 2.10
import QtQuick.Window 2.10
import QtQml.Models 2.1
import QtQuick.Controls 2.1
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
GridView {
id: root
width: 320; height: 480
cellWidth: 80; cellHeight: 80
displaced: Transition {
NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad
}
}
//! [0]
model: DelegateModel {
//! [0]
id: visualModel
model: ListModel {
id: colorModel
ListElement { color1: "blue" }
ListElement { color1: "green" }
ListElement { color1: "red" }
ListElement { color1: "yellow" }
ListElement { color1: "orange" }
ListElement { color1: "purple" }
ListElement { color1: "cyan" }
ListElement { color1: "magenta" }
ListElement { color1: "chartreuse" }
ListElement { color1: "aquamarine" }
ListElement { color1: "indigo" }
ListElement { color1: "black" }
ListElement { color1: "lightsteelblue" }
ListElement { color1: "violet" }
ListElement { color1: "grey" }
ListElement { color1: "springgreen" }
ListElement { color1: "salmon" }
ListElement { color1: "blanchedalmond" }
ListElement { color1: "forestgreen" }
ListElement { color1: "pink" }
ListElement { color1: "navy" }
ListElement { color1: "goldenrod" }
ListElement { color1: "crimson" }
ListElement { color1: "teal" }
}
//! [1]
delegate: MouseArea {
id: delegateRoot
//property int visualIndex: DelegateModel.itemsIndex
property int visualIndex: DelegateModel.itemsIndex
width: 80;
height: 80
drag.target: icon
Rectangle {
id: icon
width: 72; height: 72
anchors {
horizontalCenter: parent.horizontalCenter;
verticalCenter: parent.verticalCenter
}
color: model.color1
radius: width/2
Drag.active: delegateRoot.drag.active
Drag.source: delegateRoot
Drag.hotSpot.x: 36
Drag.hotSpot.y: 36
states: [
State {
when: icon.Drag.active
ParentChange {
target: icon
parent: delegateRoot //root
}
AnchorChanges {
target: icon;
anchors.horizontalCenter: {
if(color1 === "yellow"){
return parent.horizontalCenter;
}
else
undefined
}
anchors.verticalCenter: {
if(color1 === "yellow"){
return parent.verticalCenter
}
else
undefined
}
}
}
]
}
DropArea {
anchors { fill: parent; margins: 15 }
onEntered:{
console.log("enter " + color1)
if(color1 === "yellow")
return //console.log("enter " + iconname)
else
visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex)
}
}
}
//! [1]
}
}
}
正式的演示名称是拖放。 gridview.qml
答案 0 :(得分:0)
编辑
所以这是一个很棘手的解决方案,但是它很简单并且可以完成工作。
我基本上要做的是,每次移动后都要遍历所有项目,并在变位时放回黄色。
DropArea {
anchors { fill: parent; margins: 15 }
onEntered:{
console.log("enter " + color1)
if(color1 === "yellow")
return //console.log("enter " + iconname)
else {
visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex)
for (var i = 0; i< visualModel.items.count; i++)
{
if (visualModel.items.get(i).model.color1 === "yellow") {
visualModel.items.move(i, 3)
return;
}
}
}
}
}