A better way to drag and drop multiple groups?

Questions
, ,
1

Hi all, I’m currently using dragControls to drag and drop multiple Group objects, but apparently dragControls can only handle 1 Group i.e no matter how many Group objects I push into dragControls it will only perform drag and drop on the first group I pushed.
This can be overcome by pushing meshes into 1 temporary Group instead. But this doesn’t work if you want to drag and drop using mousedown event as the meshes are pushed into the temporary Group only after onPointerDown is fired in dragControls resulting in the meshes only being drag-able after a second mousedown event, which is not intuitive.
I overcame this by exposing onPointerDown in dragControls class and manually firing it a 2nd time after mousedown. This works and I can drag multiple groups and without needing a temporary group either.
What I want to know is if there is a better less hacky way to do this?

2

Hello,
Your current approach of exposing onPointerDown and firing it manually to overcome the issue is clever but feels like a workaround rather than an ideal solution. To address your problem more elegantly, you could consider the following approaches:

  1. Custom Drag Controls
    Instead of relying entirely on dragControls, create your own drag functionality. This gives you complete control over how events are handled, particularly for multiple groups. Here’s a rough outline:

Listen for mousedown and mousemove events on the scene or canvas.
Use raycasting to detect the objects under the pointer.
Track and apply transformations to all selected objects.
This approach may require more effort initially but provides flexibility for handling complex scenarios.

  1. Extend DragControls
    Subclass dragControls to extend its functionality. This way, you can modify its behavior without hacking it:

javascript
Copy code
class MultiGroupDragControls extends THREE.DragControls {
constructor(objects, camera, domElement) {
super(objects, camera, domElement);
}

onPointerDown(event) {
// Extend the original method to handle multiple groups
// You can customize this further based on your needs
super.onPointerDown(event);
// Additional handling logic for multiple groups
}
}
This approach encapsulates your changes, keeping your code cleaner and maintainable.

  1. Manage State with a Temporary Group Dynamically
    Instead of using a permanent temporary group, dynamically manage the grouping on the first interaction (mousedown) and immediately reflect this in dragControls. Update the objects array in dragControls dynamically:

javascript
Copy code
dragControls.objects.push(…additionalMeshes);
dragControls.activate();
This approach keeps the grouping logic dynamic and avoids requiring a second mousedown event.

  1. Modify Drag Behavior at Mesh Level
    If the goal is to drag multiple objects simultaneously, you could listen to the mousedown and determine a selection (e.g., raycasting or other logic). Then, synchronize the positions of these objects manually during the mousemove event.

  2. Community Solutions or Libraries
    There are other libraries or solutions built on top of Three.js for handling drag-and-drop interactions more robustly. Check for existing plugins or enhancements to dragControls that may solve this issue elegantly. Read Works

Recommendations
Short Term: If your current solution works well, document it as a known behavior with its limitations. This ensures clarity for future development.

Best Regards

1 Like
3

Thanks!
I’ve thought about some of your recommendations. I’m still prototyping so I’m just currently sticking with my hacky method as it was fast to implement. It probably won’t be final and I’ll settle with one of the other solutions.