Estoy usando el evento de arrastre para mover un elemento, pero no encontré la manera de hacer que solo se mueva horizontalmente, ¿hay alguna pista para esto? ¡Gracias por adelantado!
Hay tres pasos que debemos hacer: primero, obtenemos la posición actual del mouse x, segundo, calculamos la distancia que se ha movido y la dirección por newX = oldX - e.clientX diciendo restar x antiguo con el mouse x actual de esta manera obtenemos algo como - 3 o 2 o -1 verá que tenemos la distancia la dirección - o + Tercer paso actualizamos la posición horizontal del elemento por element.style.left = (element.offsetLeft - newX) + "px"
Hay más detalles en los comentarios del código. avísame si no está claro
var oldX = 0, newX = 0; // for storing X (horizontal) positions var element = document.getElementById("mydiv"); // The element you want to drag // We do the dragging here function elementDrag(e) { e = e || window.event; e.preventDefault(); newX = oldX - e.clientX; // to calculate how much we have moved oldX = e.clientX; // store current value to use for next move element.style.left = (element.offsetLeft - newX) + "px"; // update left position } // we do this so there is not multiple event handlers function closeDragElement() { document.onmouseup = null; document.onmousemove = null; } // when mouse down on element attach mouse move and mouse up for document // so that if mouse goes outside element still drags function dragMouseDown(e) { e = e || window.event; e.preventDefault(); oldX = e.clientX; // store current value to use for mouse move calculation document.onmouseup = closeDragElement; document.onmousemove = elementDrag; } element.onmousedown = dragMouseDown; #mydiv { position: absolute; z-index: 9; background-color: #2196F3; text-align: center; border: 1px solid #d3d3d3; padding: 10px; cursor: move; color: #fff; } <div id="mydiv"> Click here to move </div>