如何在演示代码中保持黄色矩形不动?

时间:2019-05-22 03:27:48

标签: qt qml drag

此演示来自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

1 个答案:

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