Solo necesitas trabajar con los eventos
mousedown (cuando se pulsa el botón del ratón) y
mouseup (cuando se lo suelta).
La idea es que el tamaño del
<div> se supedite a la posición en la que se encuentre el cursor del ratón una vez que se suelta el botón izquierdo del mismo, pero que previamente fue pulsado cuando se encontraba sobre el elemento. Entonces, para evitar conflictos cuando pulses el botón estando el cursor en otra parte del documento que no sea el
<div>, puedes utilizar una
bandera o comodín (cualquier variable) que cambie de valor cuando ocurran los eventos mencionados. Cuando se pulse el botón izquierdo del ratón estando el cursor del mismo sobre el
<div>, el valor de la bandera, que inicialmente puede ser, por ejemplo,
false, cambiaría a
true y volvería a ser
false cuando se suelte el botón izquierdo del ratón estando el cursor fuera del
<div>. En ese momento, se comprueba que el valor de la bandera sea
true —obviamente antes de que cambie— y las dimensiones del
<div> serían las mismas que la posición en los ejes
X y
Y del cursor cuando se soltó el botón izquierdo del ratón.
Código Javascript
:
Ver originalvar div = document.querySelector("#id del div"), flag = false;
div.addEventListener("mousedown", function(){
flag = true;
}, false);
document.addEventListener("mouseup", function(event){
if (flag){
div.style.width = event.clientX + "px";
div.style.height = event.clientY + "px";
flag = false;
}
}, false);
Es una forma algo rudimentaria de hacerlo, pero puedes tomarla como base para hacer algo mejor.
