Important: Please read the Qt Code of Conduct -

My dragged item is still under the target area

  • 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(
    "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");

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

    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)

    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 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?

  • 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.

Log in to reply