import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1

ApplicationWindow {
    id: winContainer
    title: qsTr("Test")
    width: 640
    height: 480
    visible: true

    Rectangle {
        id: rectBackground
        anchors.fill: winContainer.contentItem
        color: "white"
    }

    GridLayout {
        id: gridDropAreas
        anchors.fill: winContainer.contentItem
        columnSpacing: 1
        columns: 2
        flow: GridLayout.LeftToRight
        layoutDirection: Qt.LeftToRight
        rowSpacing: 1
        rows: 2
        Repeater {
            id: rptDropAreas
            model: 4
            delegate: cmpDropArea
        }
    }

    Component {
        id: cmpDropArea
        Rectangle {
            id: rectDropArea
            Layout.minimumHeight: 50
            Layout.minimumWidth: 50
            Layout.fillHeight: true
            Layout.fillWidth: true
            border {
                width: 5
                color: dropArea.containsDrag? "green": "brown"
            }
            color: "black"
            property int myIndex: index
            DropArea {
                id: dropArea
                anchors {
                    fill: rectDropArea
                    margins: rectDropArea.border.width
                }
                onDropped: {
                    console.log("dropped into drop area index #: " + rectDropArea.myIndex + ", " + drop.x + ", " + drop.y);
                    drop.acceptProposedAction();
                }
                onEntered: {
                    console.log("Entered: " + drag.x + ", " + drag.y);
                    drag.acceptProposedAction();
                }
                onPositionChanged: {
//                    console.log("Position changed to: " + drag.x + ", " + drag.y);
                    drag.acceptProposedAction();
                }
            }
        }
    }

    Item {
        id: draggable
        x: 100
        y: 100
        height: 100
        width: 100
        Drag.active: maDraggable.drag.active
        Drag.hotSpot {
            x: maDraggable.mouseX
            y: maDraggable.mouseY
        }

        Drag.dragType: Drag.Automatic
        //Drag.dragType: Drag.Internal
        Drag.proposedAction: Qt.MoveAction
        Drag.source: draggable
        Drag.onDragStarted: {
            console.log("Drag started.");
        }
        Drag.onDragFinished: {
            console.log("Drag finished.");
        }
        onParentChanged: console.log("Parent changed...")
        Rectangle {
            anchors.fill: draggable
            color: "green"
        }

        MouseArea {
            id: maDraggable
            anchors.fill: draggable
            drag.target: draggable
            drag.axis: Drag.XAndYAxis
            drag.minimumX: 0
            drag.maximumX: winContainer.width - draggable.width
            drag.minimumY: 0
            drag.maximumY: winContainer.height - draggable.height
            drag.smoothed: false
        }
    }
}