My dragged item is still under the target area

[csfreebird]

I use JavaScript to create object from dragged object dynamically and set its z property to 100, but still under the target area.
@
function createItem() {
if (DragItemType.status == Component.Ready && dragItem == null) {
dragItem = DragItemType.createObject(
parentWindow,
{
"x": posnInWindow.x,
"y": posnInWindow.y,
"z": 100,
"image": dragItemImagePath,
"toHeight": parentWindow.y / 2
}
);
// make sure created item is above the ground layer
} else if (DragItemType.status == Component.Error) {
dragItem = null;
console.log("error creating component");
console.log(DragItemType.errorString());
}
}

function continueDrag(mouse) {
if (dragItem == null)
return;

dragItem.x = mouse.x + posnInWindow.x - startingMouse.x;
dragItem.y = mouse.y + posnInWindow.y - startingMouse.y;
dragItem.z = 100;

}

function endDrag(mouse) {
if (dragItem == null)
return;

dragItem.destroy();
dragItem = null;

}@

My target area is a Item which contains one C++ class inherited from QQuickPaintedItem to draw some diagrams.
@ Item {
id: middle_top_r
anchors.top: top_r.bottom
anchors.left: left_r.right
height: parent.height * 0.6
anchors.margins: 16
width: parent.width * 0.6

    PipelineChart {
        id: aPieChart
        anchors {
            centerIn: parent
            fill: parent
        }
        color: "red"
        onChartCleared: console.log("The chart has been cleared")
    }

    MouseArea {
        anchors.fill: parent
        onClicked: aPieChart.clearChart()
    }
}@

If I comment out the PipelineChart in qml, the dragged image will appear on top of the item.
Why I ran into this problem? Any idea?

[csfreebird]

I find a way to solve this problem by myself. Just make the target area be the parent window of dragged item, use it in my createItem JavaScript function.
If the dragged item moves out of the parent window, it will be under other elements.