Redimensionner les éléments en faisant glisser le gestionnaire de séparateurs

Question

Je souhaite pouvoir faire glisser un diviseur de haut en bas pour redimensionner les divs au-dessus et en dessous du diviseur sur une hauteur de page fixe. Ces divs pourraient être dans une table, même si ce n'est pas nécessaire. En bref, je voudrais pouvoir émuler ce qui se passe sur le site jsFiddle, même si je n'ai besoin que du redimensionnement vertical. jsFiddle a utilisé mooTools, mais je veux le faire avec jQuery.

Une complication importante: je ne connaîtrai pas la taille de la div au-dessus du diviseur jusqu'à ce qu'elle soit réellement construite dynamiquement, donc je ne peux pas commencer avec un positionnement absolu.

Quelle est la meilleure solution? J'ai l'impression que je vais juste réinventer la roue si je ne demande pas :)

[BTW: un couple de questions avec des noms similaires sont liés à des exemples jsFiddle qui ne fonctionnent pas (par exemple, this) .

Jusqu'à présent, j'ai utilisé ceci:

$('.rsh').draggable({ 
     axis:'y', 
     drag: function (event, ui) {    
      var offsettop = ui.offset.top; 
      $(this).prev().css({ 
       height: offsettop 
      }); 
    }); 

Inutile de dire que ce n'est pas Workin droite encore.

Answer 1

Dans le cas où quelqu'un est intéressé à l'avenir, je l'ai à travailler bien avec ceci:

$('.rsh').draggable({ 
    axis: 'y', 
    containment: 'parent', 
    helper: 'clone', 
    drag: function (event, ui) { 
     var height = ui.offset.top - 85; 
     $(this).prev().height(height); 
    } 
}); 

C'est le fiddle. L'utilisation de clone est la clé. Les éléments draggables (.rsh) sont relatifs, donc si vous n'utilisez pas de clone, l'élément se déplace deux fois plus loin que la souris car il est également affecté par le changement de la hauteur du précédent div.

Remarque: Le - 85 est juste un détail de la mise en page tenant compte de l'en-tête et ainsi de suite.

Answer 2

Ceci est une version du code de Nick (qui était vraiment utile, merci!) Qui permet aux diviseurs suivants de rester statiques. Il fonctionne en redimensionnant les divs au-dessus et en dessous du diviseur traîné dans des directions opposées.

$('.rsh').draggable({ 
    axis: 'y' 
    ,containment: 'parent' 
    ,helper: 'clone' 
    , start: function(event, ui) { 
     $(this).attr('start_offset',$(this).offset().top); 
     $(this).attr('start_next_height',$(this).next().height()); 
    } 
    ,drag: function (event, ui) {   
     var prev_element=$(this).prev(); 
     var next_element=$(this).next(); 
     var y_difference=$(this).attr('start_offset')-ui.offset.top;    
     prev_element.height(ui.offset.top-prev_element.offset().top); 
     next_element.height(parseInt($(this).attr('start_next_height'))+y_difference); 
    } 
}); 

Answer 3

Voici une autre alternative à la version de Nick, il déplace automatiquement le gestionnaire horizontal vers le haut et à zéro comme un bel effet. En outre, il ajuste la taille en hauteur des deux sections mutuellement.

$('.horizontal_handler').draggable({ 

     axis: 'y', 
     containment: 'parent', 
     helper: 'clone', 
     drag: function (event, ui) { 

      var height = ui.offset.top - 220 // 220 : initial top margin to the previousDiv 
      , referenceHeight = nextDivHeight + previousDivHeight //500 px initial height size 
      , previousSection = $(this).prev() 
      , nextSection = $(this).next(); 

      if ((nextSection.height() === 0) && (referenceHeight - height < 0)){ 
       return; 
      } 

      previousSection.height(height); 
      nextSection.height(referenceHeight - height) ; 


      if (nextSection.height()< 20){ 
        previousSection.height(height+ nextSection.height()); 
        nextSection.height(0); 
       } 

      if (previousSection.height()< 20){ 
        nextSection.height(referenceHeight - height - previousSection.height()); 
        previousSection.height(0); 
       } 
     } 
    });