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

Questions
, ,
1

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:
https://jsfiddle.net/wxpuj0ab/

dragme_ball
dragme_ball897×537 12.8 KB

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

jsfiddle_dragdemo
jsfiddle_dragdemo2018×1137 173 KB

2

cc @Cedric and @PolygonalSun

3

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.

2 Likes
4

@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) => {
  	console.log('drag')
    ev.preventDefault();
  });

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