How to track `onDragStarted` and `onDragFinished` on a Drag QML component added to a MouseArea

Roby Brundle

I have MouseArea with a Drag QML component to start with. I want to track the drag start and end events when user tries to panMyQmlComponent

Code:

import QtQuick 2.7

MyQmlComponent {
    id: myqmlcomponent

    MouseArea {
        anchors.fill: parent
        drag.target: myqmlcomponent

        drag {
            axis: Drag.XandYAxis

            onActiveChanged: {
                console.log("onActiveChanged called")
            }

            onDragStarted: {
                console.log("onDragStarted called")
            }

            onDragFinished: {
                console.log("onDragFinished called")
            }
        }
    }
}

Problem:
onActiveChanged works fine. It is called I start to drag myqmlcomponent and also when I stop dragging. But adding onDragStarted and onDragFinished causes my application to crash on start up complaining the following

Cannot assign to non-existent property "onDragFinished"

Same with onDragStarted.

Cannot assign to non-existent property "onDragStarted"

Question:
What am I missing here? What should I do more to be able to track onDragStarted and onDragFinished?

raven-worx

@Roby-Brundle said in How to track `onDragStarted` and `onDragFinished` on a Drag QML component added to a MouseArea:

What am I missing here? What should I do more to be able to track onDragStarted and onDragFinished?

Thats because there are no such methods neither signals you are looking for.
Whats wrong with the active property?! it's set to true when the drag started, false when it's finished.

Roby Brundle

@raven-worx ah.. there are no such signals? May be I misread this documentation on Drag

how do I know when active is false or true when onActiveChanged is called? What is the "syntax" or "way" to track active true or false?

Doing the following never gets me a call where active is false. Is this correct or am I still expecting something wrong ?

onActiveChanged: {
    if (active) {
        console.log("Drag is Active")
    }
    else {
        console.log("Drag is InActive")
    }
}

raven-worx

@Roby-Brundle said in How to track `onDragStarted` and `onDragFinished` on a Drag QML component added to a MouseArea:

ah.. there are no such signals? May be I misread this documentation on Drag

Thats the wrong doc ;) you need to see the drag (grouped) property from MouseArea element.

Strange, that should get false. Otherwise how would you get notified again when it changes back to true again :)

But try to adress it directly: mouseAreaId.drag.active

Roby Brundle

@raven-worx MouseAreaID.drag.active gives me the correct state that I want to check.
Marked this topic as solved. Thanks a lot !

Aleksey_K

I solved this issue by adding explicit dragActive property to the MouseArea. Sample code:

MouseArea {
    id: mouseArea
    drag {
        target: myItem
        axis: Drag.YAxis
    }
    
    property bool dragActive: drag.active
    
    onDragActiveChanged: {
        if(drag.active) { //
            ... // Dragging started
        } else {
            ... // Dragging finished
        }
    }
}

Mairtin

Came across this issue, so I guess it's still relative as of 6.5.1

onDragStarted and onDragFinished are both still "nonexistent" properties of Drag, despite autocompleteing in the editor.
@Aleksey_K The addition of the property is not necessary. @Roby-Brundle's second code was very close:

drag { // Not mentioned, but presumedly inside drag.
	onActiveChanged: {
                // This will fire properly, but active is always TRUE. Why? Because Active refers to the MouseArea.
		if (active ) {
			console.log("Drag is Active")
		}
		else {
			console.log("Drag is InActive")
		}
	}
}

Change active to drag.active and it works as expected.