1

Tengo este código que me redimensiona el cuadrado celeste, pero a veces cuando pulso el mouse sobre lo azul oscuro para redimensinarlo y lo muevo rápidamente me aparece esto: 🚫(en negro) y no se porque ocurre.

const elemento = document.querySelector(".elemento");
let mover = false;
let X;
let Y;

document.querySelector(".f").addEventListener("mousedown", amover);
function comprobar(e){ 
  if(mover == true){
    X = derecha(e, X);
  }
  return;
};

window.addEventListener("mousemove", comprobar);
window.addEventListener('mouseup', eliminar);

function amover(e){
  X = e.clientX;
  Y = e.clientY;
  mover = true;
}

function eliminar(){
  mover = false;
};

document.ondragstart = function(){return;}

function derecha(e, X){
  const width = parseFloat(getComputedStyle(elemento).width) - (X - e.clientX);
  if(width < 1)return X;
  elemento.style.width = width + "px";
  document.querySelector(".f").style.left = elemento.getBoundingClientRect().right + "px";
  X = e.clientX;
  return X;
}
.f {
  width: 20px;
  height: 50px;
  background-color: blue;
  position: absolute;
  z-index:3;
  cursor: e-resize;
  margin-top: 0px;
  left: 50px;
}

.elemento {
  height: 50px;
  width: 50px;
  background-color: aqua;
}
<p class="f"></p>
<p class="elemento"></p>

He intentado resolverlo poniendo window a los dos controladores de eventos de mousemove y mouseup y document.ondragstart = function(){return;} (también intente poner window en vez de document y me daba lo mismo) para que no se genere un conflicto con la API de drag and drop, pero nose que falla. ¿Porqué me aparece el 🚫 y cómo lo soluciono? Muchisimas gracias!

2 respuestas 2

2

En tu elemento, están ocurriendo dos eventos:

  • Evento de arrastre.
  • Evento de selección.

Y al querer arrastrar muy rápido, estás seleccionando el elemento antes de querer arrastrarlo, es decir, está ocurriendo primero el evento de selección antes que el de arrastre, y pienso que te sale el 🚫 porque no te permite seleccionar el elemento.

Entonces quitemos el evento de selección con la propiedad de CSS user-select: none;, así no seleccionas el elemento y solo ocurre el de arrastre, ejemplo:

const elemento = document.querySelector(".elemento");
let mover = false;
let X;
let Y;

document.querySelector(".f").addEventListener("mousedown", amover);
function comprobar(e){ 
  if(mover == true){
    X = derecha(e, X);
  }
  return;
};

window.addEventListener("mousemove", comprobar);
window.addEventListener('mouseup', eliminar);

function amover(e){
  X = e.clientX;
  Y = e.clientY;
  mover = true;
}

function eliminar(){
  mover = false;
};

document.ondragstart = function(){return;}

function derecha(e, X){
  const width = parseFloat(getComputedStyle(elemento).width) - (X - e.clientX);
  if(width < 1)return X;
  elemento.style.width = width + "px";
  document.querySelector(".f").style.left = elemento.getBoundingClientRect().right + "px";
  X = e.clientX;
  return X;
}
.f {
  width: 20px;
  height: 50px;
  background-color: blue;
  position: absolute;
  z-index:3;
  cursor: e-resize;
  margin-top: 0px;
  left: 50px;
  user-select: none; /* indico que no se pueda seleccionar */
}

.elemento {
  height: 50px;
  width: 50px;
  background-color: aqua;
}
<p class="f"></p>
<p class="elemento"></p>

1

No necesitas javascript para cambiar el tamaño, solo con CSS puedes lograrlo mediante la regla resize e incluso con algo más de estilo puedes llegar a tener lo mismo que tu ejemplo

.elemento {
  height: 50px;
  width: 70px;
  background-color: aqua;
  resize:horizontal;
  overflow: scroll;
}
.elemento::-webkit-resizer {
    background-color: blue;
}
.elemento::-webkit-scrollbar {
    width: 20px;
    height: 50px;
}
<p class="elemento"></p>

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.