# PointerDragBehavior moving meshes with onDragObservable

**URL:** <https://forum.babylonjs.com/t/pointerdragbehavior-moving-meshes-with-ondragobservable/54250>\
**Category:** Questions\
**Tags:** drag, pointerdragbehavior\
**Created:** [October 21, 2024, 2:09am UTC](https://forum.babylonjs.com/t/pointerdragbehavior-moving-meshes-with-ondragobservable/54250 "2024-10-21T02:09:35Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![kzhsw](https://avatars.discourse-cdn.com/v4/letter/k/848f3c/32.png) [@kzhsw](https://forum.babylonjs.com/u/kzhsw)\
**Post date:** [October 21, 2024, 2:09am UTC](https://forum.babylonjs.com/t/pointerdragbehavior-moving-meshes-with-ondragobservable/54250/1 "2024-10-21T02:09:35Z")

</div>

Version: 7.30.0  
Engine: WebGL2  
Playground: [Babylon.js Playground](https://playground.babylonjs.com/#PQUTZO)  
Description:  
I’m trying to move 2 meshes via PointerDragBehavior, so I attached PointerDragBehavior to one mesh (`sphere`), and move anther mesh (`followingMesh`) in the `onDragObservable` event, and update the position of `followingMesh` with the position of `sphere`.  
But as I drag, the positions of the 2 meshes got different, see the screenrecording below, how to resolve it?

Actual:  
 ![screenrecording](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/b/ab1311fcbf91123565ab7487cf3f94f1f1f4c54d.gif)

Expected:  
The 2 meshes should have the the same position while dragging.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [October 21, 2024, 2:30am UTC](https://forum.babylonjs.com/t/pointerdragbehavior-moving-meshes-with-ondragobservable/54250/2 "2024-10-21T02:30:36Z")

</div>

I believe one needs to update the position more often than DragBehavior fires events.  
Here is the one of possible solutions - [https://playground.babylonjs.com/#PQUTZO#1](https://playground.babylonjs.com/#PQUTZO#1)

---

<div class="post-metadata">

**Author:** ![kzhsw](https://avatars.discourse-cdn.com/v4/letter/k/848f3c/32.png) [@kzhsw](https://forum.babylonjs.com/u/kzhsw)\
**Post date:** [October 21, 2024, 2:35am UTC](https://forum.babylonjs.com/t/pointerdragbehavior-moving-meshes-with-ondragobservable/54250/3 "2024-10-21T02:35:10Z")

</div>

Thanks for your quick respond. Does this means to delay position update for 1 frame? Why is this needed?

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [October 21, 2024, 2:50am UTC](https://forum.babylonjs.com/t/pointerdragbehavior-moving-meshes-with-ondragobservable/54250/4 "2024-10-21T02:50:19Z")

</div>

The matter is that if you drad too fast, the positions has not enough time to update after drag end - [https://playground.babylonjs.com/#PQUTZO#2](https://playground.babylonjs.com/#PQUTZO#2)  
Another possible solution is to update position on DragEnd - [https://playground.babylonjs.com/#PQUTZO#3](https://playground.babylonjs.com/#PQUTZO#3)

---

<div class="post-metadata">

**Author:** ![kzhsw](https://avatars.discourse-cdn.com/v4/letter/k/848f3c/32.png) [@kzhsw](https://forum.babylonjs.com/u/kzhsw)\
**Post date:** [October 21, 2024, 3:17am UTC](https://forum.babylonjs.com/t/pointerdragbehavior-moving-meshes-with-ondragobservable/54250/5 "2024-10-21T03:17:30Z")

</div>

> [@labris](#):
>
> [https://playground.babylonjs.com/#PQUTZO#2](https://playground.babylonjs.com/#PQUTZO#2)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/3/13eb8b975e74259395955f2f9f12c06380812cd4.png)  
Using this, the positions printed on the GUI are the same, but positons rendered in scene is different.

> [@labris](#):
>
> Another possible solution is to update position on DragEnd - [https://playground.babylonjs.com/#PQUTZO#3](https://playground.babylonjs.com/#PQUTZO#3)

Using `onDragEndObservable` can make the positions eventually the same, but not during dragging.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [October 21, 2024, 4:07am UTC](https://forum.babylonjs.com/t/pointerdragbehavior-moving-meshes-with-ondragobservable/54250/6 "2024-10-21T04:07:18Z")

</div>

> [@kzhsw](#):
>
> the positions printed on the GUI are the same, but positons rendered in scene is different.

The positions printer on the GUI are positions fired with DragBehavior, not DradEnd. If you sync positions at the DragEnd, they are identical. Or if you drag again, they will be synced at start.  
The difference (for X coord) is seen here - [https://playground.babylonjs.com/#PQUTZO#4](https://playground.babylonjs.com/#PQUTZO#4)

---

<div class="post-metadata">

**Author:** ![kzhsw](https://avatars.discourse-cdn.com/v4/letter/k/848f3c/32.png) [@kzhsw](https://forum.babylonjs.com/u/kzhsw)\
**Post date:** [October 21, 2024, 7:00am UTC](https://forum.babylonjs.com/t/pointerdragbehavior-moving-meshes-with-ondragobservable/54250/7 "2024-10-21T07:00:32Z")

</div>

Is this something with dirty mechanism? If line 81 being changed to `followingMesh.position = sphere.position.clone();`, the rendered and displayed position diffs.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/b/ab0dd77004ba20d1a2173aa396cb3a45f4280053.png)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [October 21, 2024, 4:21pm UTC](https://forum.babylonjs.com/t/pointerdragbehavior-moving-meshes-with-ondragobservable/54250/8 "2024-10-21T16:21:05Z")

</div>

cc @amoebachant

---

<div class="post-metadata">

**Author:** ![amoebachant](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amoebachant/32/39450_2.png) [@amoebachant](https://forum.babylonjs.com/u/amoebachant)\
**Post date:** [October 21, 2024, 6:40pm UTC](https://forum.babylonjs.com/t/pointerdragbehavior-moving-meshes-with-ondragobservable/54250/9 "2024-10-21T18:40:43Z")

</div>

Hi @kzhsw,  
The reason you were seeing that behavior is that the PointerDragBehavior doesn’t instantly move the mesh to the new mouse location, it animates it there. So, when you were reading the sphere’s position and setting the followingMesh’s position to that position, it was the current position of the sphere, not where it was animating to.

The event data provided to the callback for the onDragObservable has what you need though.  
event.delta gives you the change in position that is being applied to the attached mesh (the sphere), so we can apply it to the follow mesh and it’ll jump exactly to where the sphere is going to animate to.

Take a look here: [https://playground.babylonjs.com/#PQUTZO#6](https://playground.babylonjs.com/#PQUTZO#6)

You could animate it to that position as well if you prefer.

Hope that helps!
