gistfile1.js

import QtQuick 2.0

Item {
    width: 720
    height: 600

    Rectangle {
        width: 120
        height: 600
        color: palette.window
        anchors.left: parent.left

        SystemPalette { id: palette }

        Component {
            id: lineTile

            Rectangle {
                z: 0
                border.width: 1
                color: "white"
                width: 100
                height: 100

                Rectangle {
                    color: "black"
                    width: 2.5
                    height: parent.height
                    anchors.centerIn: parent
                }

                Drag.active: mouseArea.drag.active
                Drag.hotSpot.x: width / 2
                Drag.hotSpot.y: height / 2

                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    drag.target: parent
                    drag.onActiveChanged: {
                        if (!drag.active) {
                            parent.Drag.drop()
                        }
                    }
                }
            }
        }

        Loader {
            id: sourceLineTile
            sourceComponent: lineTile
            anchors.centerIn: parent
        }
    }

    Rectangle {
        z: 2
        anchors.right: parent.right
        id: grid
        width: 600
        height: 600
        color: palette.dark

        Component {
            id: dropArea

            DropArea {
                x: (index * 100) % 600
                y: Math.floor(index / 6) * 100

                width: 100
                height: 100

                onDropped: {
                    var tile = drop.source
                    if (tile === sourceLineTile.item) {
                        tile.x = 0
                        tile.y = 0
                        tile = lineTile.createObject (parent)
                    }
                    tile.x = x
                    tile.y = y
                }

                Rectangle {
                    z: 2
                    anchors.fill: parent
                    color: palette.highlight
                    visible: parent.containsDrag
                }
            }
        }

        Repeater {
            model: (parent.width * parent.height) / 10000
            delegate: dropArea
        }
    }
}