JQuery/JQueryUI divisor horticultor

Question

recientemente para un sitio web en el que estoy trabajando Quería crear un divisor horizontal capaz de cambiar el tamaño de dos elementos en una página usando jquery.

Básicamente:

contenido

___Divisor _ __ _ _

contenido

Cuando: el separador se arrastra, debe cambiar el tamaño de los elementos de "Contenido" a cada lado del tamaño deseado por el usuario.

Esto es lo que tengo hasta ahora.

<div id="WorkRequests"></div> 
<div id="Divider" style="height:10px; padding:5px; cursor:n-resize;"><hr /></div> 
<div id="WorkRequest_Ajax"></div> 

Y el guión:

var totalHeight = $("#Divider").parent().height(); 
    function ResizePage(divPosition) { 
     var validDrag = true; 

     // Math 
     var minPercent = totalHeight * 0.25; 
     var minBuffer = totalHeight * 0.05; 
     var topHeight = divPosition.top - $("#content").position().top; 
     var bottomHeight = (totalHeight - divPosition.top); 

     // Check Drag 
     if (topHeight < minPercent) { 
      validDrag = false; 
      $("#WorkRequests").height(minPercent + minBuffer); 
     } 

     if (bottomHeight < minPercent) { 
      validDrag = false; 
      $("#WorkRequest_Ajax").height(minPercent + minBuffer); 
     } 

     // Set Heights 
     if (validDrag) { 
      $("#WorkRequests").height(topHeight); 
      $("#WorkRequest_Ajax").height(bottomHeight); 
     } 

     return validDrag; 
    } 

    $("#Divider").draggable({ axis: "y", drag: function (event, ui) { return ResizePage($(this).position()); } }); 

Sin embargo, cuando me arrastre el divisor simplemente salta y se bloquea en cualquiera de las extremidades, me han tratado muchos cálculos diferentes, etc, pero me temo que simplemente hago No entiendo los factores para cambiar el tamaño de ambos elementos.

¿Alguien sabe un plugin de jquery que hará esto por mí o cómo puedo solucionar mi intento?

Gracias, Alex.

Answer 1

También puede pagar el UI.Layout jQuery plugin. Aquí hay un demo.

Answer 2

Usted sólo debe utilizar el jQuery interacción de tamaño variable: http://jqueryui.com/demos/resizable/

Es bastante fácil para restringir las áreas de arrastre por lo que sólo puede cambiar el tamaño horizontal (pero creo que lo que realmente se necesita es una zona vertical de tamaño variable)