For now maybe I should give up on trying to integrate TilesGrid and just have tile positions be a config file thing with a custom grid.

[DrewNaylor]

TilesGrid is just too hard for me right now.

Here's what I can try: https://stackoverflow.com/a/61804867

I'll have to have a spacing property that's added to the x and y values for when tiles are added if the column and row are greater than 0 (zero). Making sure tiles are moved to the next available space will also be necessary if they're resized, as will moving tiles when unpinning them. The row amount will need to be grabbed from the highest value in the tiles layout config file also, I'm thinking what we can do is there will be a property that's increased if the current tile we're looking at in the config file has a larger row value than that temporary "total rows" variable, and we'll send it back to the main file along with all the tiles in the dict so it can be processed right then, just like I do with the messagebox regarding deprecated tile stuff.

Will need to have the file licensed under the CC BY-SA 3.0 because it's pretty much what I need and I don't foresee it being basically entirely changed like I usually do.

This won't include drag-and-drop support yet, but it's better than nothing.

[DrewNaylor]

Oh, I also need to have this in a Flickable for scrolling.

[DrewNaylor]

This answer might help with drag-and-drop when I'm ready to do that, but I'll need to re-add support for getting indexes from the simple grid unless I can just get the children from it instead: https://stackoverflow.com/a/13970199

Not everything will be used from it though, and I need to re-implement the collision code in a way that doesn't cause a lot of interference and is simple.

Here's the answer for archival, it was posted by meolic and is under the CC BY-SA 3.0:
"Here, I give the working code. I have added additional hiearchy and put Rectangle into Item. Moreover, I had to reparent Rectangle. There are many similar solutions available, e.g. here.

In the given solution, there is no problem with function indexAt() and thus explicit calculation of gridArea.index is not needed anymore.

I will appreciate any comment on this solution and why these changes are so important. I still think that the original solution is intuitive and I do not understand why it is not working.

import QtQuick 1.1

GridView {
    id: mainGrid
    cellWidth: 165; cellHeight: 95
    width: 5*cellWidth; height: 4*cellHeight
    model: myModel
    delegate: myButton

    ListModel {
        id: myModel
        function createModel() {
            for (var i=1; i<=20; i++) {
                myModel.append({"display": i, "uid": i})
            }
        }
        Component.onCompleted: {createModel()}
    }

    Component {
        id: myButton
        Item {
            id: item
            width: mainGrid.cellWidth-5; height: mainGrid.cellHeight-5;
            Rectangle {
                id: box
                parent: mainGrid
                x: item.x; y: item.y;
                width: item.width; height: item.height;
                border.width: 1
                property int uid: (index >= 0) ? myModel.get(index).uid : -1
                Text {
                    anchors.centerIn: parent
                    text: display
                    font.pixelSize: 48
                }
                states: [
                    State {
                        name: "active"; when: gridArea.activeId == box.uid
                        PropertyChanges {target: box; x: gridArea.mouseX-80; y: gridArea.mouseY-45; z: 10}
                    }
                ]
            }
        }
    }

    MouseArea {
        id: gridArea
        anchors.fill: parent
        hoverEnabled: true
        preventStealing : true
        property int index: mainGrid.indexAt(mouseX, mouseY) //item underneath cursor
        property int activeId: -1 //uid of active item
        property int activeIndex //current position of active item

        onPressAndHold: {
            activeId = mainGrid.model.get(activeIndex=index).uid
        }
        onReleased: {
            activeId = -1
        }
        onPositionChanged: {
            if (activeId != -1 && index != -1 && index != activeIndex) {
                mainGrid.model.move(activeIndex, activeIndex = index, 1)
            }
        }
    }
}

"

Also, in 2019, Valentin Radu posted this comment to another answer posted by meolic I'll copy after their comment:
"The code at 'onPositionChanged' doesn't really work properly, as you also need to swap the previous/next position relative to new position with old position. This way, vertical swaps work as well. The corrected code should be onPositionChanged: { if (activeId != -1 && index != -1 && index != activeIndex) { var ac = activeIndex; mainGrid.model.move(activeIndex, activeIndex = index, 1); if (ac < activeIndex) { mainGrid.model.move(activeIndex - 1, ac, 1); } else { mainGrid.model.move(activeIndex + 1, ac, 1); }}}"

And here's meolic's other answer, also under CC BY-SA 3.0 (link: https://stackoverflow.com/a/13975952 ) :
"Here is another answer using drag property of MouseArea. Its strange, but this solution has problems with function indexAt(). Moreover, it seems not to be possible to add nice slow motion effects using Behavior on x and y.

Any comment on this solution is also very welcome.

import QtQuick 1.1

GridView {
    id: mainGrid
    cellWidth: 165; cellHeight: 95
    width: 5*cellWidth; height: 4*cellHeight
    model: myModel
    delegate: myButton

    ListModel {
        id: myModel
        function createModel() {
            for (var i=1; i<=20; i++) {
                myModel.append({"display": i})
            }
        }
        Component.onCompleted: {createModel()}
    }

    Component {
        id: myButton
        Rectangle {
            id: item
            z: 1
            width: mainGrid.cellWidth-5; height: mainGrid.cellHeight-5;
            border.width: 1
            Text {
                anchors.centerIn: parent
                text: display
                font.pixelSize: 48
            }
        }
    }

    MouseArea {
        id: gridArea
        anchors.fill: parent
        hoverEnabled: true
        drag.axis: Drag.XandYAxis
        //property int index: mainGrid.indexAt(mouseX,mouseY) //NOT WORKING RELIABLE!
        property int mX: (mouseX < 0) ? 0 : ((mouseX < mainGrid.width - mainGrid.cellWidth) ? mouseX : mainGrid.width - mainGrid.cellWidth)
        property int mY: (mouseY < 0) ? 0 : ((mouseY < mainGrid.height - mainGrid.cellHeight) ? mouseY : mainGrid.height - mainGrid.cellHeight)
        property int index: parseInt(mX/mainGrid.cellWidth) + 5*parseInt(mY/mainGrid.cellHeight)  //item underneath cursor
        property int activeIndex

        onPressAndHold: {
            currentIndex = index
            currentItem.z = 10
            gridArea.drag.target = currentItem
            activeIndex = index
        }
        onReleased: {
            currentItem.x = mainGrid.cellWidth * (index % 5)
            currentItem.y = mainGrid.cellHeight * parseInt(index / 5)
            currentItem.z = 1
            currentIndex = -1
            gridArea.drag.target = null
        }
        onPositionChanged: {
            if (drag.active && index !== -1 && index !== activeIndex) {
                mainGrid.model.move(activeIndex, activeIndex = index, 1)
            }
        }
    }
}

"