Distinguish between click / drag

Questions
1

Hi there,
how would i distiguish between a click and a “drag” in this example:

lets say when clicked, delete the object. when dragged drag it.
i just cant find a way how i would do that. Any help is welcome!!
Thank you so much!

2

Hi, and welcome to the forum!

Drag is a state that you can get from your pointer down and pointer up. while pointer down is triggered, and before pointer up is triggered, every pointer move event is practically a drag. The demo actually does it well - if no mesh was selected, pointer move will do nothing. meaning - no drag of an actual mesh is happening.

1 Like
3

Hey @pcace,
Following what @RaananW laid out about the differences between drag and click, you could accomplish what you’re trying to do by doing something like:

// Variable to keep track of your click timeout timer
var clickStartTimer = undefined;
// Bool to determine if your click will delete or not
var isAbleToDelete = true;
...
// Observable to allow us to handle pointer input
scene.onPointerObservable.add((eventData) => {
    const type = eventData.type;
    // If the user clicks, start a timer.  If the timer finishes, prevent user from deleting clicked object
    if (type === BABYLON.PointerEventTypes.POINTERDOWN) {
        clickStartTimer = window.setTimeout(() => {
            isAbleToDelete = false;
            // Do some kind of dragging
        }, 100); // Wait 100 ms before considering this a click
    }
    // When user let's go of mouse button, clear the timer, if it never finished, delete the object
    else if (type === BABYLON.PointerEventTypes.POINTERUP) {
        window.clearTimeout(clickStartTimer);
        if (isAbleToDelete) {
            // Delete the desired mesh
        }
        else {
            // Stop dragging
        }
        isAbleToDelete = true;
    }
});

Here’s a basic implementation of the above snippet: Drag/Click Demo | Babylon.js Playground (babylonjs.com)

Keep in mind that this does not account for what button was pressed or if a mesh was actually clicked on so you still will need to fill in some logic. One thing that I will say is that, if possible, I’d recommend using a different button for dragging from your delete button (eg. left-click to drag, right-click to delete) to minimize mistakenly deleted objects.

1 Like
4

Thanks a lot! sounds a little complicated, but works!