Grid layout scrambles elements from model when moved

import Qt 4.6

Rectangle {
    id: appRect
    width: 800
    height: 480

    ListModel {
        id: gridModel
    }

    function buildModel() {
        for (var i = 0; i < 16; i++) {
            gridModel.append({name: i})
        }
    }

    Component.onCompleted: buildModel()

    LauncherPane {
        id: paneOne
        width: parent.width/2
        height: parent.height
        color: "green"
    }
}

import Qt 4.6

Rectangle {
    Grid {
        id: pane

        function indexUnder(x, y) {
            var col = Math.floor(x / 100);
            var row = Math.floor(y / 100);
            return (row*columns)+col;
        }

        spacing: 10
        columns: 4
        Repeater {
            id: icons
            model: gridModel
            delegate: appIcon
        }


        Component {
            id: appIcon

            Item {
                width: 90
                height: 90

                Rectangle {
                    id: draggable
                    width: 90
                    height: 90
                    color: "blue"

                    Text {
                        anchors.centerIn: parent
                        text: model.index
                        font.pixelSize: 30
                    }

                    states: State {
                        name: "dragged"
                        ParentChange { target: draggable; parent: appRect; }
                        ParentChange { target: mouseArea; parent: appRect; }
                    }


                    MouseArea {
                        id: mouseArea
                        anchors.fill: parent

                        onPressed: draggable.state = "dragged"
                        onReleased: {
                            draggable.state = ""
                            draggable.x = 0
                            draggable.y = 0
                        }

                        onPositionChanged: {
                            if(parent != appRect)
                                return;

                            var _indexUnder = pane.indexUnder(mouse.x, mouse.y);
                            if(_indexUnder != index && _indexUnder < gridModel.count) {
                                print("moving " + index + " to " + _indexUnder);
                                gridModel.move(index, _indexUnder, 1);
                            }
                        }


                        drag.target: draggable
                        drag.axis: "XandYAxis"
                        drag.maximumX: width
                        drag.maximumY: height


                        Rectangle {
                            color: "red"
                            opacity: 0.2
                            anchors.fill: parent
                        }

                    }
                }
            }
        }
    }
}