# React and Three.js, Dragging Issue

**URL:** <https://discourse.threejs.org/t/react-and-three-js-dragging-issue/58571>\
**Category:** Questions\
**Created:** [November 26, 2023, 10:22am UTC](https://discourse.threejs.org/t/react-and-three-js-dragging-issue/58571 "2023-11-26T10:22:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sarah203](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@Sarah203](https://discourse.threejs.org/u/Sarah203)\
**Post date:** [November 26, 2023, 10:22am UTC](https://discourse.threejs.org/t/react-and-three-js-dragging-issue/58571/1 "2023-11-26T10:22:57Z")

</div>

assume that we have a random number of boxes, all the boxes are draggable, when you choose a random box, that box should not collide with other boxes due to dragging  
hint: " i already tried the bounding box to check for collision but dont know what to write after"  
thanks for helping \<3

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [November 27, 2023, 1:52am UTC](https://discourse.threejs.org/t/react-and-three-js-dragging-issue/58571/2 "2023-11-27T01:52:01Z")

</div>

Figuring out how to repair a collision is really hard, but remembering where it was before it started colliding, and moving it back to that place once it collides is a lot easier.

So, maybe record where all the cubes are at the beginning… let the user do their move… and if there is a collision, reset the colliding cube back to your saved spot? If there is not collision, then update that cubes saved position to its new position… and repeat the process.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 27, 2023, 10:02am UTC](https://discourse.threejs.org/t/react-and-three-js-dragging-issue/58571/3 "2023-11-27T10:02:23Z")

</div>

do you use a physics system? dragging plus collisions is pretty easy if you have one

for example [Lusion connectors - CodeSandbox](https://codesandbox.io/s/lusion-connectors-xy8c8z) (this isn’t technically dragging but one shape follows the mouse). the other shapes aren’t fixed, but if they were they wouldn’t budge.

otherwise you would have to implement your own light collision system, using raycasting and three-bvh.

ps if it helps i have basic resources for dragging in react + three, though none of these implement physics yet

> **[Plane project - CodeSandbox](https://codesandbox.io/s/plane-project-uexjm)**
>
> Drag and drop items projected onto a 2d plane

> **[Lines - CodeSandbox](https://codesandbox.io/s/lines-yuyr6z)**
>
> Lines by drcmda using @react-three/drei, @react-three/fiber, @types/three, react, react-dom, react-scripts, three

> **[Bezier curves & nodes - CodeSandbox](https://codesandbox.io/s/3k4g6)**
>
> Creating node diagrams with drei's Line and bezier curves.