bootstrap - resize div javascript

jQuery Manual Resizable DIV

Question

Intento crear un div redimensionable 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 y mouseup), pero en los siguientes (mousedown + mousemove) s, el navegador intenta arrastrar todo el resizeBar div en lugar de cambiar el tamaño del contenedor padre. En mouseup, el div luego comienza a cambiar el tamaño de "cooldiv" en mousemove sin ningún mousedown requerido, hasta un nuevo clic del mouse.

Estos problemas no aparecen en Internet Explorer.

Answer 1

Prueba agregar

$("#cooldiv").focus();

hasta el final de su función de mouseup.

Answer 2

de vez en cuando pude romper la funcionalidad de cambio de tamaño, donde obtendría el cursor "no permitido" y la caja no cambiaría el tamaño dinámicamente, aunque cuando soltara el mouse cambiaría el tamaño apropiadamente y se mantendría de esa manera.

añadiendo return false; hasta el final de la función de cambio de resize parece impedir que el navegador intente seleccionar / arrastrar la barra de cambio de tamaño. Estoy trabajando en un entorno limitado, así que solo puedo probar con ie8 (y ie8 en modo ie7).

Tuve que reemplazar sus llamadas a $() con $(document) para que esto funcione. También recomendaría mover el enlace de mousemove fuera del controlador de mousedown , y eliminar la llamada de desvinculación.

Answer 3

Este es un ejemplo con una etiqueta "hr" como separador (entre 2 divs):

<div>Text here</div>
<hr />
<div>Other text</div>

Javascript: (usando JQuery):

var hr = null;
$("hr").mousedown(function(e) {
    hr = {
        y : e.pageY,
        p : $(this).prev(),
        n : $(this).next(),
        ph: $(this).prev().height(),
        nh: $(this).next().height()
    };
    e.preventDefault();
});
$(document).mousemove(function(e) {
    if(hr) {
        hr.p.height(hr.ph+(e.pageY - hr.y));
        hr.n.height(hr.nh-(e.pageY - hr.y));
    }
    e.preventDefault();
}).mouseup(function(e) {
    hr = null;
    e.preventDefault();
});

CSS (opcional):

hr {
    background-color: #DDD;
    border: 1px solid #AAA;
    cursor: n-resize;
    height: 10px;
}