How to change the position of the dragged element in pointerDragBehavior.onDragObservable when set pointerDragBehavior.moveAttached to false and customize the drag interaction

Questions
1 
const targetMesh = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);
targetMesh.position = BABYLON.Vector3.Zero();
const pointerDragBehavior = new BABYLON.PointerDragBehavior();
pointerDragBehavior.moveAttached = false;
pointerDragBehavior.onDragStartObservable.add((event) => {
  console.log("dragStart");
  console.log(event);
});
pointerDragBehavior.onDragObservable.add((event) => {
  console.log("drag");
  console.log(event);
  const pickedPoint = event.pointerInfo.pickInfo.pickedPoint;
  // setting the position of the mesh does not take effect
  targetMesh .position.x = pickedPoint.x;
  targetMesh .position.z = pickedPoint.z;
  targetMesh .position.y = 0;
});
pointerDragBehavior.onDragEndObservable.add((event) => {
  console.log("dragEnd");
  console.log(event);
});
pointerDragBehavior.attach(targetMesh);
2

Please provide a valid Playground and not just a code block. It makes debugging/testing much more easier.

2 Likes
3

I made a mistake before. pointerDragBehavior.onDragObservable can change the position of the drag mesh, but boundingBoxGizmo.pointerDragBehavior.onDragObservable cannot change the position of the mesh, when pointerDragBehavior.moveAttached is set to false.Here is an example:

pointerDragBehavior not of boundingBoxGizmo,works ok:

4

Did you check this : Babylon.js docs

5

boundingBoxGizmo.pointerDragBehavior.onDragObservable cannot change the position of the mesh, when pointerDragBehavior.moveAttached is set to false.you can see this demo:

6

Let me take a deeper look.

8

I’ve checked and because of validation and other factors, it seems complicated to change position in drag event notification. I would suggest to keep the delta received from the notification event and then apply it when an onBeforeRenderObservable for example.

Another solution is to change the target like in this PG: