Problem with PointerDragBehavior startDrag() method when fired outside Babylon canvas

Hi! I have problems when i’m trying to use PointerDragBehavior startDrag() method. I have a web app were I should be able to drag html-element from a page and then drop it to Babylon canvas.

Basics works very well but now i have problem that when i start PointerDragBehavior with startDrag() method it doesn’t update mesh position as expected. It only update mesh position at start but when i’m continue dragging and moving mouse over canvas that attached mesh doesn’t follow the cursor.

I can’t simulate problem inside playground so i have to do an example project to jsfiddle and here is the link:

In this example project i wish that when i’m dragging “DRAG ME”-element to over BJS canvas - then the sphere should start following the cursor. Javascript console shows that all listeners and observables are fired but sphere position doesn’t update. Any ideas?!

cc @Cedric and @PolygonalSun

With a bit of debugging, it looks like onPointerObservable isn’t firing when the cursor is over the canvas. I suspect this is because pointermove events are suppressed when dragging is active. I can’t think of any good ways to handle this off the top of my head but if something comes to mind, I’ll put it in this thread.


@Jukka replying to your PM here because others might find this useful.

In your JSFiddle, you called e.preventDefault on drag event:

  element.addEventListener("drag", (ev) => {

which I suspect stopped the event from propagating to Babylon canvas (no console for console.log("BJS - onDragObservable"), thus the ball does not move.

Internally, Babylon uses pointerdown, pointermove, and pointerup events, if I’m correct.

You should use the same events to register the dragged item. When the drag begins, clone the dragItem and move the clone along the cursor manually (by appending it to document.body, and using fixed position).

When the dragged cursor enters the Babylon Canvas, simply remove the clone from the DOM.

This way you won’t have to call event.preventDefault(), and Babylon observables should work correctly.

1 Like