# Two box & two control transform overlapping - how to separate to move only one box? =\> solution: DragControls **URL:** \ **Category:** Questions\ **Tags:** transform-controls, drag-controls\ **Created:** [August 28, 2023, 7:58am UTC](https://discourse.threejs.org/t/two-box-two-control-transform-overlapping-how-to-separate-to-move-only-one-box-solution-dragcontrols/55433 "2023-08-28T07:58:08Z")\ **Posts on this page:** 4\ **Page:** 1

**Author:** ![three3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/three3d/32/38430_2.png) [@three3d](https://discourse.threejs.org/u/three3d)\ **Post date:** [August 28, 2023, 7:58am UTC](https://discourse.threejs.org/t/two-box-two-control-transform-overlapping-how-to-separate-to-move-only-one-box-solution-dragcontrols/55433/1 "2023-08-28T07:58:08Z")

little problem/big problem 🙂 I have two objects/box; each object has its control transform connected; in specific circumstances these objects may overlap; and then the problem arises how to move only one object because the cursor recognizes two control transforms at the same time and unfortunately two boxes are moved; - here I think you need some js code fragment to check how many control transforms have been recognized under the cursor and possibly to select only one to move? - how to recognize how many control transform are highlighted under the cursor? ![howcnotrolsseparate](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/6/668da603648addd43107e243c8f998badcf01041.png) ```javascript

``` ---

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\ **Post date:** [August 28, 2023, 12:01pm UTC](https://discourse.threejs.org/t/two-box-two-control-transform-overlapping-how-to-separate-to-move-only-one-box-solution-dragcontrols/55433/2 "2023-08-28T12:01:28Z")

Couldn’t you rewrite your code and avoid the usage of two instances of `TransformControls`? How about doing it similar to the [three.js editor](https://threejs.org/editor/)? Meaning you can only transform a single object by selecting it first via a `pointerdown` interaction. Instead of pointer down, you could also check objects in your scene when `pointermove` is triggered. In this case the controls are assigned to the object as soon as you hover over it. ---

**Author:** ![three3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/three3d/32/38430_2.png) [@three3d](https://discourse.threejs.org/u/three3d)\ **Post date:** [August 28, 2023, 6:06pm UTC](https://discourse.threejs.org/t/two-box-two-control-transform-overlapping-how-to-separate-to-move-only-one-box-solution-dragcontrols/55433/3 "2023-08-28T18:06:39Z")

@Mugen87 thanks for the hints; I found examples with DragControls e.g. [DragControls - Three.js Tutorials](https://sbcode.net/threejs/drag-controls/) I turned off autoanimation of boxes, activated orbitControl and fortunately, I miss the option of moving the boxes only along one axis declared in the script, e.g. X, how to save it in js? ```javascript let controls = new OrbitControls( camera, renderer.domElement ); ... let drag = new DragControls(......cubes, camera, renderer.domElement) // drag.addEventListener( 'mousedown', function () { // is mousedown needed? // console.log('mousedown') // }) drag.addEventListener( 'dragstart', function () { controls.enabled = false; // drag only X..........??? }); drag.addEventListener( 'dragend', function () { controls.enabled = true; // end drag only X..........??? }); ``` ---

**Author:** ![three3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/three3d/32/38430_2.png) [@three3d](https://discourse.threejs.org/u/three3d)\ **Post date:** [August 30, 2023, 11:18am UTC](https://discourse.threejs.org/t/two-box-two-control-transform-overlapping-how-to-separate-to-move-only-one-box-solution-dragcontrols/55433/4 "2023-08-30T11:18:41Z")

ok, after various trials and searches, I figured out what DragControls is all about and how to adapt it to my own needs (in moving objects that may overlap in specific situations); To close the topic, I’m posting my example, which may be useful to a novice like me. - there are 6 large visible planes in the scene (e.g. for model cutting etc.); - each pair of planes can move along one fixed axis oX,Y,Z; - in the js script, 6 hidden small planes placed in the center of large planes are responsible for moving large planes; - why so ? because I wanted to use DragControls and DragControls did not recognize the entire large plane, but only its smaller fragments in the center; - thanks to this, if the cursor hovers over a large plane but not its center, the scene orbit will not be blocked (!); only hovering over and clicking a fragment of the center of a large plane will activate DragControls; - in practice, the hidden small plane is moved and the large plane is visible at the same time (which dynamically captures the position of the small plane) - the mechanism …addEventListener( ‘hoveron’… and …addEventListener( ‘hoveroff’… helps to visually distinguish which plane is to be moved ![dragcontrols6](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/c/ac2529b255a09c17443bfc0d4138f282f69ef9cd.gif) ```javascript

```