Dragging an dynamically created object out of a ListView

Kysymys

Hi there,

I want to drag an object out of a ListView and then later on use it for something.

in the ListView is a set of objects
dragging is initiated by press and hold
the list item is removed from the list
the dragged object can be dragged around (aka used for something)

The problem is, that I can't get the dragged object to move immediately after the press and hold. I always have to release the mouse and press the generated object again to get it moving.
@// DragItem.qml
import QtQuick 2.0

Rectangle {
width: 100; height: 100
border.width: 1
MouseArea {
anchors.fill: parent
drag.target: parent
onPressed: parent.color = "purple"
onReleased: parent.color = "orange"
}
}
@
@// Main.qml
import QtQuick 2.0

Item {
id: root
width: 400; height: 400

ListView {
    width: 100; height: 400
    spacing: 10

    model: ListModel {
        id: listModel
        ListElement { color: "blue" }
        ListElement { color: "yellow" }
        ListElement { color: "red" }
    }

    delegate: Rectangle {
        width: 100; height: 100
        color: model.color
        MouseArea {
            anchors.fill: parent
            onPressAndHold: {
                var position = mapToItem(root, x, y)
                var component = Qt.createComponent("DragItem.qml")
                var properties = {
                    "x": position.x, "y": position.y,
                    "color": model.color
                }
                component.createObject(root, properties)
                listModel.remove(index)
            }
        }
    }
}

}
@