pc.ElementDragHelper Examples

Help & Support
1

I’m working on implementing some draggable UI elements in a project, and I came across this in the api reference:

https://developer.playcanvas.com/en/api/pc.ElementDragHelper.html

I searched around to see if there are any examples of this code being used, but no one ever seemed to get an answer when asking if this was even functional. If it is functional, what is the best way to implement this class on an existing element in code?

I saw that this was a possible solution: 2D UI: Element Drag and Drop demo

,but I wanted to check if the api functions were preferred before I went too far with the other sample.

Any insight would be greatly appreciated.

Thank you!

2

I need to check but I think the scroll bar for scrollable UI elements uses it :thinking:

Same with the scrollable area

1 Like
3

Thank you @yaustar. I’ve been fiddling with calling the constructor in events,variables, and just plainly in the initialize scripts, but no luck. That’s from sheer ignorance on my part, I’m sure.

4

Here, I made a small example how to use the helper class:
https://playcanvas.com/editor/scene/1054550

There appears to be a bug, preventing the draggable to work under root screen, so I nested it under another screen (can be any screen element). I will make a github issue about it.

Edit:

2 Likes
5

@LeXXik,

Thank you very much for the example. It didn’t work at first, but I immediately realized my failure. I had been forgetting to activate ‘Use Input’ on the image element. Activating it made everything work.

Then out of curiosity, I tried simply making a script that held

this._handleDragHelper = new pc.ElementDragHelper(this.entity.element, 'y');

in the initialize function. It worked. I feel a little dumb, but I appreciate your help!

1 Like