import QtQuick 2.0			
			
Item {
    id: root

    Item {
        width: 50
        height: 50

        Rectangle{
            id:rectangle
            color: "yellow"
            width: 50
            height: 50
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            Drag.active: mouseArea.drag.active
        }

        MouseArea{
            z: 1
            id : mouseArea
            anchors.fill: parent
            drag.target: rectangle
            onPressed:{
                rectangle.Drag.hotSpot.x = mouse.x
                rectangle.Drag.hotSpot.y = mouse.y
            }

            onReleased: {
                rectangle.Drag.drop();
            }
        }


        states: State {
            name: "dragging"
            when: mouseArea.drag.active
            ParentChange { target: rectangle; parent: root }
            AnchorChanges { target: rectangle; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
        }
    }


	DropArea {
		x: 200
		y: 200
		width: 200
		height: 200

		onEntered: {
			console.log("red onEntered");
		}
		onExited: {
			console.log("red onExited");
		}

		Rectangle {
			color: "red"
			anchors.fill: parent


			DropArea {
                x: 50
                y: 50
                width: 100
				height: 50
				onEntered: {
					console.log("green onEntered");
				}
				onExited: {
					console.log("green onExited");
				}

				Rectangle {
					color: "green"
					anchors.fill: parent
				}
			}
		}
	}


	DropArea {
		x: 150
		y: 300
		width: 300
		height: 50

		onEntered: {
			console.log("blue onEntered");
		}
		onExited: {
			console.log("blue onExited");
		}

		Rectangle {
			color: "blue"
			anchors.fill: parent
		}
	}
}