How to deactivate DragControls in Three.js? - three.js

Question

I would like to stop DragControls functionality after checkbox deselection. I try to use removeEventListener, but it seems not to be working. Do you have any idea how to deactivate DragControls?
let dragControls;
function dragControlsStart() {
dragControls.addEventListener('dragstart', function (event) {
controls.enabled = false;
});
dragControls.addEventListener('dragend', function (event) {
controls.enabled = true;
});
}
function dragControlsStop() {
dragControls.removeEventListener('dragstart', function (event) {
controls.enabled = false;
});
dragControls.removeEventListener('dragend', function (event) {
controls.enabled = true;
});
}
function dragAndDropActivate() {
let checkBox = document.getElementById("dragAndDropCheckbox");
dragControls = new THREE.DragControls(meshes, camera, renderer.domElement);
if (checkBox.checked == true) {
dragControlsStart();
}
else if (checkBox.checked == false) {
dragControlsStop();
}
}

Answer 1

It looks like the controls have an activate and deactivate function on them that add and remove all the events, which sounds like what you're looking for:
// create drag controls once and activate or deactivate
const dragControls = new THREE.DragControls(meshes, camera, renderer.domElement);
function dragAndDropActivate() {
let checkBox = document.getElementById("dragAndDropCheckbox");
if (checkBox.checked == true) {
dragControls.activate();
}
else if (checkBox.checked == false) {
dragControls.deactivate();
}
}
Another thing to note in your code is that the way you are adding and removing events will not work in Javascript because you are creating new function handles every time you call those functions. Instead you want to create a function once and use the same reference when adding or removing listeners.
function dragEndCallback(event) {
// ...
}
dragControls.addEventListener('dragEnd', dragEndCallback);
dragControls.removeEventListener('dragEnd', dragEndCallback);
Hope that helps!

Answer 2

Solution:
let dragControls = new THREE.DragControls(ArrayOfMesh, camera, renderer.domElement);
dragControls.addEventListener('dragstart', function (event) {
controls.enabled = false;
});
dragControls.addEventListener('dragend', function (event) {
controls.enabled = true;
});
dragControls.deactivate();
function dragAndDropActivate() {
let checkBox = document.getElementById("dragAndDropCheckbox");
if (checkBox.checked == true) {
dragControls.activate();
}
else if (checkBox.checked == false) {
dragControls.deactivate();
}
}