Drag Behavior in 2D UI

Questions
1

I’m looking to implement “drag and drop” behavior within the Babylon GUI. I don’t have any trouble doing this using meshes (e.g., if I build my UI via AdvancedDynamicTexture.CreateForMesh(), and create mesh-based objects such as planes), however I am trying to figure out if it is possible while using the full screen AdvancedDynamicTexture and with simple UI containers and controls such as the Rectangle, TextBlock, TextInput, etc. Is this possible?

I suppose a similar question would be “is there a way to capture ‘click’ events in UI elements, or to use onPointerObservable() to do this?” (Perhaps I’ve just missed this in the docs.)

2

Actually maybe @DarraghBurke might be able to provide guidance as they implemented smthg similar in the gui editor I believe ???

3

GUI controls have pointer observables just like scenes - you can call control.onPointerDownObservable.add(callback) to add some behavior when the user clicks or taps the control. Similar functions exist for pointer up, move, etc.

Here is a quick example I put together showing one way to implement drag and drop: Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com)

Basically, when the user clicks a control we mark it as the dragged control, then update the position on every pointer move. When the user releases the pointer, we stop dragging.

A couple of notes though:

  1. we need to turn off isPointerBlocker when dragging, or else the scene won’t get any pointer events (because they will be captured by the control). We can turn it back on when we stop dragging
  2. If you drop a control on top of another one, the drop event won’t be fired, because the other control is a pointer blocker. If you wanted to fix this, you could turn off isPointerBlocker for all controls when you’re dragging.
2 Likes
4

This sounds like it will work perfectly! Don’t know why I couldn’t locate this in my searches.

Haven’t tried it yet, but just wanted to say thanks ahead of time. (And a special thanks for the two pointers at the end. I have a feeling they saved me several hours! lol)

1 Like
5

@DarraghBurke Is it also possible to drag&drop a GUI control with a “Windows like” behavior:
start dragging when user click (mouseDown) and drop the element on mouseUp?
Without the 2nd click to drop…

6

let me add @carolhmj our gui specialist to the thread but bear in mind she will be off until next week.

1 Like
7

Yes, it’s possible, you’d just need to change which pointer observables you respond to. Pointer down starts the dragging process and pointer up stops it. Here’s the updated example: Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com)

8

Perfect!
Thanks for explanation @carolhmj !