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.)
Actually maybe @DarraghBurke might be able to provide guidance as they implemented smthg similar in the gui editor I believe ???
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:
- 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
- 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.
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)