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

Question

This demo is from official demo of drag and drop.

I have changed a little. Now when other rectangle enterd the mousearea including the yellow rectangle, the yellow rectangle won't move. And yellow rectangle itself can't be draged too.

but when I drag cyan into the area between the green rec and the red one or other rectangle which is not in the area including the yellow rec, the yellow rectangle will move. It's not OK.

how can I fix that?

I already google, don't know which keyword to 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]
    }
}

}

offical demo name is draganddrop. gridview.qml

luffy luffy · Accepted Answer · 2019-05-22T08:14:50

EDIT

so this is kind of a hacky solution, but it is simple and it gets the job done.

What I basically did, is to iterate over the items after each movement and put yellow back in case it changed position.

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?

1 Answers