Race condition in qml drag&drop code? MouseArea?

[Kumosan]

I was trying to drag an image from a QML ListView. The code below shows a horizontal list of images using a model based on QAbstractListModel. The images display fine, flicking ok.
When I do a longpress, the image under the cursor is copied into a new QML Image and made draggable. Until the mouse button is released the ListView is disabled so it does not interfere with the dragging. Works fine...most of the time. Unfortunately from time to time the whole programm freezes. Looks like no mouse events are processed at all.

Strangely also the
dImage.x = mouseX
dImage.y = mouseY
works only most of the time. Usually the left upper edge of the image is positions directly under the mouse cursor. But from time to time the image seems to move randomly within the MouseArea.

If a QML expert finds something strange in the code below and give me a hint.... :-)

import QtQuick 1.1
 
Rectangle{
	id: topRect
	width: 300
	height: 200
	MouseArea{
		id: outerMouse
		anchors.fill: parent
		drag.filterChildren: true
		Rectangle{
			id: rect1
			width: topRect.width
			height: 100
			ListView {
				id: view1
				width: parent.width
				height: parent.height
				orientation: ListView.Horizontal
				model: myModel1
				delegate: Image {
					id: dele1
					width: 130; height: 100
					fillMode: Image.PreserveAspectFit
					smooth: true
					source: display
				}
			}
			ImageModel {
				id: myModel1
				mImageFolder: "./Images/"
			}
		}
		onPressAndHold:{
			if(!view1.moving){
				console.log("------------Start Drag--------")
				view1.interactive = false
				var idx = view1.indexAt(mouse.x+view1.contentX, mouse.y+view1.contentY)
				dImage.source = myModel1.indexImage(idx)
				drag.target   = dImage
				dImage.x      = mouseX
				dImage.y      = mouseY
			}
		}
		onReleased:{
				view1.interactive = true
				dImage.source = ""
				console.log("released")
		}
	}
	Image{
		id: dImage
		width: 60
		height: 60
	}
}

import QtQuick 1.1

Rectangle{
	id: topRect
	width: 300
	height: 200
	MouseArea{
		id: outerMouse
		anchors.fill: parent
		drag.filterChildren: true
		Rectangle{
			id: rect1
			width: topRect.width
			height: 100
			ListView {
				id: view1
				width: parent.width
				height: parent.height
				orientation: ListView.Horizontal
				model: myModel1
				delegate: Image {
					id: dele1
					width: 130; height: 100
					fillMode: Image.PreserveAspectFit
					smooth: true
					source: display
				}
			}
			ImageModel {
				id: myModel1
				mImageFolder: "./Images/"
			}
		}
		onPressAndHold:{
			if(!view1.moving){
				console.log("------------Start Drag--------")
				view1.interactive = false
				var idx = view1.indexAt(mouse.x+view1.contentX, mouse.y+view1.contentY)
				dImage.source = myModel1.indexImage(idx)
				drag.target   = dImage
				dImage.x      = mouseX
				dImage.y      = mouseY
			}
		}
		onReleased:{
				view1.interactive = true
				dImage.source = ""
				console.log("released")
		}
	}
	Image{
		id: dImage
		width: 60
		height: 60
	}
}

To copy to clipboard, switch view to plain text mode 

---

Added after 14 minutes:

Found a solution... Though I don't understand it at all.
To solve the random position the drag images sometimes had, I added:

onPositionChanged: 
{
  dImage.x      = mouseX
  dImage.y      = mouseY
}

onPositionChanged: 
{
  dImage.x      = mouseX
  dImage.y      = mouseY
}

To copy to clipboard, switch view to plain text mode 

to the outerMouse MouseArea. Strangely it fixed both problems. Freezing seems to be gone, too.