Quiero pedirte ayuda. Estoy creando un cuadrado móvil que tiene que funcionar de esta manera:
Pero tengo un problema con el segundo punto porque el cuadrado se atrasa cuando estoy usando offsetX/Y. Descubrí que la razón es el cursor en el cuadrado, porque entonces el offset deja de contar los ejes X/Y. ¿Qué puedo hacer con él? Cuando muevo el cuadrado hacia la izquierda o hacia arriba, está bien.
CÓDIGO HTML:
<div class="container"> <div class="square"> </div> </div>CSS:
body { padding: 0; margin: 0; width: 100vw; height: 100vh; background: bisque; display: flex; justify-content: center; align-items: center; } .container { width: 80vw; height: 80vh; border: 1px solid rgb(255, 122, 122); position: relative; overflow: hidden; } .square { width: 100px; height: 100px; background: blueviolet; cursor: pointer; position: relative; }JAVASCRIPT:
const square = document.querySelector('.square') const container = document.querySelector('.container') square.addEventListener('mousedown', createClass); square.addEventListener('mouseup', removeClass); container.addEventListener('mousemove', movingSquare); // ADDING CLASS 'ACTIVE' function createClass(e) { e.target.className = "square active"; } // MOVING SQUARE function movingSquare (e) { if (square.classList.contains('active')) { square.style.transform = `translate(${e.offsetX}px, ${e.offsetY}px)`; // square.style.left = e.offsetX + 'px'; // square.style.top = e.offsetY + 'px'; } } // REMOVING CLASS 'ACTIVE' function removeClass(e) { e.target.className = "square" }Puedo ver una posible ventaja de usar valores .offset pero prefiero usar los valores clientX y clientY . Requiere ajuste para permitir las posiciones del elemento principal, pero no es difícil.
En mi fragmento, en lugar de agregar y eliminar clases, accedo a las propiedades de estilo .left y .top del elemento. Se podría agregar un nombre de clase si desea cambiar otros aspectos.
Al igual que en su código, uso detectores de eventos para mousedown , mousemove y mouseup .
En el evento mousedown , configuro un indicador boolean true si el elemento de destino es el cuadro móvil (esto equivale a su adición de clase). También configuro las posiciones del cursor .client para el inicio y actualizo los valores iniciales left y top (en relación con su contenedor principal por sustracción) para el elemento móvil.
Esto permite que el oyente mousemove actualice (siempre que el indicador de destino se haya establecido en true ) las propiedades de estilo left y top en una cantidad igual al movimiento de las coordenadas del cursor desde que se hizo el mousedown .
const box = document.getElementsByClassName('square')[0]; let downInBox=false; let initialLeft = 0; let initialTop = 0; let deltaX = 0; let deltaY = 0; let startX = 0; let startY = 0; document.addEventListener('mousedown', event => { if (event.target == box ) { downInBox=true; initialLeft = parseInt(box.getBoundingClientRect().left - box.parentElement.getBoundingClientRect().left); initialTop = parseInt(box.getBoundingClientRect().top - box.parentElement.getBoundingClientRect().top); startX = event.clientX; startY = event.clientY; } // end if }); // end mousedown; document.addEventListener('mouseup', event => { downInBox=false; }); // end mouseup; document.addEventListener('mousemove', event => { if (downInBox) { deltaX = startX-event.clientX; deltaY = startY-event.clientY; box.style.left = `${initialLeft-deltaX}px`; box.style.top = `${initialTop-deltaY}px`; } // end if; }); // end mousemove; body { padding: 0; margin: 0; width: 100vw; height: 100vh; background: bisque; display: flex; justify-content: center; align-items: center; } .container { width: 80vw; height: 80vh; border: 1px solid rgb(255, 122, 122); position: relative; overflow: hidden; } .square { width: 100px; height: 100px; background: blueviolet; cursor: pointer; position: relative; left: 0px; top: 0px; } <div class="container"> <div class="square"> </div> </div> El oyente mouseup simplemente restablece el indicador false (equivalente a que elimine la clase).