jQuery DIV redimensionable manual
Estoy tratando de crear un div de tamaño variable sin usar la biblioteca de interfaz de jQuery.
var myY = 0;
var mouseDown = false;
var originalHeight = 0;
function resize(e){
if(mouseDown == true){
$("#cooldiv").height(originalHeight+e.pageY-myY);
}
}
$(document).ready(function(){
$().mouseup(function(e){
myY = 0;
mouseDown = false;
originalHeight = 0;
$().unbind("mousemove", resize);
});
$("#resizeBar").mousedown(function(e){
myY = e.pageY;
originalHeight = $("#cooldiv").height();
mouseDown = true;
$().bind("mousemove", resize);
});
});
...
<div id="cooldiv" style="width: 500px; height: 300px; background-color: #cccccc; position: relative;">
<div id="resizeBar" style="height: 10px; width: 500px; background-color: #aaaaaa; position: absolute; bottom: 0;"></div>
</div>
El primer cambio de tamaño funciona bien (es decir, mousedown, mousemove luego mouseup), pero en los siguientes (mousedown + mousemove), el navegador intenta arrastrar todo el div resizeBar en lugar de cambiar el tamaño de su contenedor principal. En el mouseup, el div luego comienza a cambiar el tamaño de "cooldiv" en el mousemove sin que se requiera un mousedown, hasta que se haga clic con el mouse.
Estos problemas no aparecen en Internet Explorer.