Estoy tratando de detectar la dirección del mouse al arrastrar el mouse. Cuando el botón del mouse está presionado y el usuario arrastra el mouse, quiero que el texto cambie hacia la izquierda o hacia la derecha según la dirección de arrastre del mouse.
Aquí está mi código.
var divOverlay = document.getElementById ("div"); var dragged = false window.addEventListener('mousedown', function () { dragged = false }) document.addEventListener('mousemove', function () { dragged = true }) window.addEventListener('mouseup', function(e) { if (dragged == true && e.pageX <= 0) { direction = "left" } else if (dragged == true && e.pageX >= 0) { direction = "right" } divOverlay.innerHTML = direction; oldx = e.pageX; }) #div { width: 100px; height: 100px; background: red; } <div id="div"></div>No creo que esté demasiado lejos, pero no puedo entrenar lo que estoy haciendo mal, así que necesito ayuda.
Aquí tienes. Solo necesitaba un ajuste menor.
var divOverlay = document.getElementById ("div"); var dragged = false var oldX = 0; window.addEventListener('mousedown', function (e) { oldX = e.pageX; dragged = false }) document.addEventListener('mousemove', function () { dragged = true }) window.addEventListener('mouseup', function(e) { if (dragged == true && e.pageX < oldX) { direction = "left" } else if (dragged == true && e.pageX > oldX) { direction = "right" } divOverlay.innerHTML = direction; }) #div { width: 100px; height: 100px; background: red; } <div id="div"></div>Debe agregar oldX a la verificación de posición. También necesita inicializarlo.
var divOverlay = document.getElementById("div"); var dragged = false var oldX = 0; window.addEventListener('mousedown', function (e) { dragged = false; // set start position of drag oldX = e.pageX; }); document.addEventListener('mousemove', function () { dragged = true }); window.addEventListener('mouseup', function (e) { // compare drag end position with start position if (dragged == true && e.pageX <= oldX) { direction = "left" } else if (dragged == true && e.pageX > oldX) { direction = "right" } divOverlay.innerHTML = direction; }); #div { width: 100px; height: 100px; background: red; } <div id="div"></div>Tener una función separada para manejar la dirección relativa del mouse en el eje X es más probable que sea algo adecuado para lo que le gustaría hacer. En lugar de intentar actualizar las variables, elimine eventListener una vez que suelte el mouse.
Vea a continuación como un ejemplo:
const body = document.body; const container = document.getElementById('container'); const directionTag = document.getElementById("direction"); const moveFunc = function (e) { let direction; if (e.movementX < 0) { container.style.backgroundColor = "red"; direction = "left"; } else if (e.movementX > 0) { container.style.backgroundColor = "blue"; direction = "right"; } if (typeof direction !== "undefined") { directionTag.innerHTML = direction; } }; body.onmousedown = function () { body.addEventListener("mousemove", moveFunc); }; body.onmouseup = function () { body.removeEventListener("mousemove", moveFunc); }; #container { height: 150px; margin: 20px; padding: 20px; width: 300px; border: 1px solid #888; } <body> <div id="container">This will change when you hold down</div> <p id="direction">Unset</p> </body>