0

Tengo 3 cuadrados, uno naranja, uno azul y otro morado. El cuadrado azul se mueve con el morado pero al moverlo hacia abajo hay un punto en el que se crea una scrollbar y el cuadrado azul no se sale del naranja, pero el morado si se sale porque no esta dentro del naranja. Lo que quiero es que el cuadrado morado no se salga del naranja. Y para ello pensé en bajar la scrollbar automáticamente y así que no se salga porque cuando bajo la scrollbar me muestra el cuadrado morado dentro del naranja. Este es mi código:

let a = document.getElementById("ej1");
let b = document.getElementById("ej2");
a.addEventListener("mousedown", moverelemento);
b.style.left = a.getBoundingClientRect().left + "px";
b.style.top = a.getBoundingClientRect().bottom - 66 + "px";
document.getElementById("ej").addEventListener("scroll", encuadrar);
function encuadrar(){
    b.style.left = a.getBoundingClientRect().left + "px";
    b.style.top = a.getBoundingClientRect().bottom - 66 + "px";
}
function moverelemento(e) {
  const X = e.clientX - a.getBoundingClientRect().left;
  const Y = e.clientY - a.getBoundingClientRect().top;
  a.ondragstart = function () { return false; }
  function mover(pageX, pageY) {
    a.style.left = pageX - X + 'px';
    a.style.top = pageY - Y + 'px';
    b.style.left = a.getBoundingClientRect().left + "px";
    b.style.top = a.getBoundingClientRect().bottom - 66 + "px";
  }
  function posicionar(event) {
    mover(event.pageX, event.pageY);
  }
  window.addEventListener('mousemove', posicionar);
  window.addEventListener('mouseup', eliminar);
  function eliminar(e) {
    window.removeEventListener('mousemove', posicionar);
  }
}
#ej {
  height: 200px;
  width: 400px;
  background: orange;
  overflow: auto;
  position: absolute;
}

#ej1 {
  height: 100px;
  width: 100px;
  position: absolute;
  background-color: blue;
  top: -16px;
}

#ej2 {
  background-color: purple;
  position: absolute;
  width: 50px;
  height: 50px;
}
<div id="ej">
  <p id="ej1"></p>
</div>
<p id="ej2"></p>
(Mejor pruébenlo en pantalla completa)

Encontre que existía esto: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo para hacer que la scrollbar se desplazase y así evitar que el cuadrado morado se saliera. Pero intentando ponerlo en mi código sigue sin hacer lo que yo quiero.

Si no se entiende porfavor díganmelo. Muchas gracias.

8
  • Creo que no estás seguro sobre la pregunta. ¿Mover la scrollbar hacia abajo? Si el cuadrado morado está arriba. ¿No será que quieres que el cuadrado permanezca siempre en la pantalla? En ese caso, usa position: fixed en css
    – Mateo
    Commented el 16 mar. 2023 a las 14:17
  • Es la scrollbar del cuadrado naranja. Igual no he formulado bien. El cuadrado morado esta arriba, pero cuando yo muevo el cuadrado azul, que se mueve con el morado llega un punto en el que llega al final del cuadrado naranja, y se crea una scrollbar. El cuadrado azul se queda dentro del naranja, pero el morado no, porque no esta dentro del naranja. Y lo que quería hacer para que el morado no se saliese en ese punto era bajar la scrollbar del elemento naranja para que se quedara dentro.
    – Roberto
    Commented el 16 mar. 2023 a las 14:34
  • Me faltaba un poco de código, igual por eso tampoco se entendía, espero que ahora si se entienda. Gracias!
    – Roberto
    Commented el 16 mar. 2023 a las 15:17
  • if azultop +azul height > naranja height -> naranja scroll to ( azul top + azul height) ; o limitar el movimiento cuando azultop +azul height > naranja height Commented el 16 mar. 2023 a las 15:19
  • 1
    hay algo parecido en es.stackoverflow.com/a/183212/81450 Commented el 16 mar. 2023 a las 15:25

1 respuesta 1

1

definis ap como el parent del div a

ap = a.parentElement;

Luego al mover te fijas si los boundaries se escapan "se van de boundary" o en otras palabras si el borde derecho ( o borde inferior ) del elemento movible/movido es mayor o igual al borde derecho ( o borde inferior ) del elemento contenedor.

Si eso pasa le decis al scroll del contenedor que se ponga al máximo posible.

if (
  a.getBoundingClientRect().bottom >= ap.getBoundingClientRect().bottom
) {
  ap.scrollTop = ap.scrollHeight;
}
if (
  a.getBoundingClientRect().right >= ap.getBoundingClientRect().right
) {
  ap.scrollLeft = ap.scrollWidth;
}

let a = document.getElementById("ej1");
let b = document.getElementById("ej2");
a.addEventListener("mousedown", moverelemento);
b.style.left = a.getBoundingClientRect().left + "px";
b.style.top = a.getBoundingClientRect().bottom - 66 + "px";
document.getElementById("ej").addEventListener("scroll", encuadrar);

ap = a.parentElement;

function encuadrar() {
  b.style.left = a.getBoundingClientRect().left + "px";
  b.style.top = a.getBoundingClientRect().bottom - 66 + "px";
}

function moverelemento(e) {
  const X = e.clientX - a.getBoundingClientRect().left;
  const Y = e.clientY - a.getBoundingClientRect().top;
  a.ondragstart = function() {
    return false;
  }

  function mover(pageX, pageY) {
    a.style.left = pageX - X + 'px';
    a.style.top = pageY - Y + 'px';
    b.style.left = a.getBoundingClientRect().left + "px";
    b.style.top = a.getBoundingClientRect().bottom - 66 + "px";

    if (a.getBoundingClientRect().bottom >= ap.getBoundingClientRect().bottom) {
      ap.scrollTop = ap.scrollHeight;
    }

    if (a.getBoundingClientRect().right >= ap.getBoundingClientRect().right) {
      ap.scrollLeft = ap.scrollWidth;
    }

  }

  function posicionar(event) {
    mover(event.pageX, event.pageY);
  }
  window.addEventListener('mousemove', posicionar);
  window.addEventListener('mouseup', eliminar);

  function eliminar(e) {
    window.removeEventListener('mousemove', posicionar);
  }
}
#ej {
  height: 200px;
  width: 400px;
  background: orange;
  overflow: auto;
  position: absolute;
}

#ej1 {
  height: 100px;
  width: 100px;
  position: absolute;
  background-color: blue;
  top: -16px;
}

#ej2 {
  background-color: purple;
  position: absolute;
  width: 50px;
  height: 50px;
}
<div id="ej">
  <p id="ej1"></p>
</div>
<p id="ej2"></p>

1
  • 1
    Grax! Ya entendí
    – Roberto
    Commented el 16 mar. 2023 a las 15:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.