GUI Dragging Issues

Questions
1

I have a couple of issues of dragging a GUI panel:

As shown below, there is no issue to drag a rectangle panel with nothing on it.

https://www.babylonjs-playground.com/#KNMZ0#35

If a textblock is added to the panel, the panel will jump when the pointer is down at the beginning of the drag.

https://www.babylonjs-playground.com/#KNMZ0#36

If a rectangle in blue is attached to the larger panel, the panel will jump when the pointer is down in the blue area at the beginning of the drag.

https://www.babylonjs-playground.com/#KNMZ0#37

Can someone help look into this and how to fix the issues?

1 Like
2

Alright! I think I got a fix for you.

https://www.babylonjs-playground.com/#KNMZ0#38

Doing some console.logs I realized your start position didn’t seem correct. Take a look at line 79. I changed it to be the objects starting position instead of the target.

start = new BABYLON.Vector2(parseFloat(object.left), parseFloat(object.top));

The version you had caused problems because I think you were focusing on the target’s position. In the cases where you had added an item inside of your rectangle the target would be those objects. The positions for those objects are relative to the container they are inside. In this case the position was 0 which caused the jump you saw.

4 Likes
3

@msDestiny14 Thanks for the quick response! This helps a lot.

2 Likes