I am struggling to implement a feature where a user can move a div left or right by clicking, holding, and moving the mouse. The goal is for the position of the div to follow the x position of the mouse while held down. I have seen solutions to similar questions before, but I am having trouble getting it to work in my specific case. To simplify things, instead of moving the div, I just want "hello" to display in the console when the mouse is moved while clicked. Any assistance on this would be highly appreciated.
var divEl = document.getElementById("div");
var down = false;
divEl.addEventListener('mousedown', function (event) {
var down = true;
console.log("true");
}, true);
window.addEventListener('mouseup', function (event) {
var down = false;
console.log("false");
}, true);
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (down) {
console.log("hello");
}
}, true);
Although I see "true" when clicking on the div and "false" when releasing the mouse, I am unable to get the "hello" message to display in the console as intended.