Reset/Allow addEventListener after removeEventListener - addeventlistener

Question

Still pretty new to Javascript so apologies if this Q has been asked a hundred times, not completely sure what I should be searching for (terminology).
I have a couple nested events and these so far work, and removing these events works as well. The issue is that once the event is removed with removeEventListener, the addEventListener events no longer fire again without a page reload.
Current code:
// Listen for mousedown.
handle.addEventListener("mousedown", function icHandleDrag (e) {
e.preventDefault();
dragging = true;
// Listen for mousemove.
document.body.addEventListener("mousemove", function icResizeResize (ex) {
var adjustOffsetLeft = ex.pageX - icContainerLeft,
offsetLocation = ((adjustOffsetLeft / icContainerWidth) * 100) + "%";
if (adjustOffsetLeft > (icContainerWidth * 0.01) && adjustOffsetLeft < (icContainerWidth * 0.99)) {
resize.style.width = offsetLocation;
handle.style.left = offsetLocation;
}
// Listen for mouseup.
handle.addEventListener("mouseup", function icStopDragging () {
if (dragging) {
// Remove event listeners.
handle.removeEventListener("mousedown", icHandleDrag);
document.body.removeEventListener("mousemove", icResizeResize);
handle.removeEventListener("mouseup", icStopDragging);
dragging = false;
}
});
});
});
In most docs/posts I've read, the suggestions say to create a function, then pass that function to a separate event listener (not quite sure how to do that with the current nested structure).
Is there a way I can keep my addEventListener's functioning after a removeEventListener? Or will I have to look at a different approach for structurinng this code?
Thanks!

Answer 1

It's because you are removing the mousedown EventListener and it never gets added again.
I've changed the code you provided. Now the mousedown is not being removed, and have isolated the functions for readability.
See if this helps.
// Listen for mousedown.
handle.addEventListener("mousedown", icHandleDrag);
function icHandleDrag (e) {
e.preventDefault();
dragging = true;
// Listen for mousemove.
document.body.addEventListener("mousemove", icResizeResize);
}
function icResizeResize (ex) {
var adjustOffsetLeft = ex.pageX - icContainerLeft,
offsetLocation = ((adjustOffsetLeft / icContainerWidth) * 100) + "%";
if (adjustOffsetLeft > (icContainerWidth * 0.01) && adjustOffsetLeft < (icContainerWidth * 0.99)) {
resize.style.width = offsetLocation;
handle.style.left = offsetLocation;
}
// Listen for mouseup.
handle.addEventListener("mouseup", icStopDragging);
}
function icStopDragging () {
if (dragging) {
// Remove event listeners.
document.body.removeEventListener("mousemove", icResizeResize);
handle.removeEventListener("mouseup", icStopDragging);
dragging = false;
}
}