如何让我的演示代码中的黄色矩形不能移动？

Question

我有点变了。现在当其他矩形包括黄色矩形进入鼠标区域时，黄色矩形不会移动。黄色矩形本身也不能拖动。

但是当我将青色拖到绿色 rec 和红色 rec 之间的区域或不在包含黄色 rec 的区域中的其他矩形时，黄色矩形将移动。不行。

我该如何解决？

我已经 google，不知道要 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

Answer 1

编辑

所以这是一个有点棘手的解决方案，但它很简单并且可以完成工作。

我基本上做的是在每次移动后迭代项目并将黄色放回去以防它改变位置。

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

如何让我的演示代码中的黄色矩形不能移动？

how to keep yellow Rectangle in my demo code can't be moved?

qt

drag

qml