pointerDragBehavior questions

Questions
1

Hi, … long time,
I hope you are all good!

I have a couple of questions about pointerDragBehavior. I hope you can help me

  1. Can I change the cursor on the mesh which has attached the pointerDragBehavior? I know I can do this with actionManager, but I’m curious if I can do this somehow from pointerDragBehavior.
  2. How I can validate a drag? As example to work only between some values … Meanwhile I found the answer for this :sweat_smile:

validateDrag

is the answer
3. How I can add a step to this? As example I want to be able to drag it only from integer unit to integer unit, or with a step of 2
4. I have as example 5 objects, and I want to be able to drag them in an interval but in the same time to keep a min distance between them. Can I do this with pointerDragBehavior or shall I use the default event system?
They are positioned like this

image
image828×736 5.27 KB

And at the end they will look like this
image
image868×556 3.96 KB

I tried to simulate the drag but keep that min distance between them

I have a playground as well, where I tried few things

btw, I’m so excited about the new version of BABYLONJS
Thank you so much!

2

cc @PolygonalSun

3

Hi,
I made some progresses

I hope I’m on the right way :thinking:

5

Hey Biscuit,
As far as changing the cursor, you’d either need to use an actionManager or you’d have to manually change the cursor style (eg. canvas.cursor.style="wait", I think). If you’re trying to move by some integer or fixed value, you could always just store the dragDistance and just move it when it breaks some threshold value. For example:

var dragDeltas = 0;
...
...onDragObservable.add(event => {
    dragDeltas += event.dragDistance;
    const intMove = Math.round(dragDeltas);
    if (intMove  !== 0) {
        // Move object by intMove
        ...
        // Reset dragDeltas for next move
        dragDeltas = 0;
    }
});

For your last question, you could always try enabling collisions on your meshes and using moveWithCollisions(/* Vector of Movement */). For spacing, you could also create an invisible mesh to act as a collision box. Here’s a crude example: https://playground.babylonjs.com/#L6RQEI#2.

Keep in mind, that these aren’t the only solutions to these questions. These are just the ones that come to mind. Hopefully, these tips can help you out.

1 Like
7

Hi, thank you so much @PolygonalSun for the insights, I’ll try and come back with updates!

1 Like