通過拖動分隔線處理程序來調整元素大小

我希望能夠上下拖動分隔線以在固定頁面高度上調整分隔線上方和下方的div大小。這些div可以放在一個表格中，儘管它們不需要。通過拖動分隔線處理程序來調整元素大小

總之，我希望能夠模擬jsFiddle網站上發生的情況，儘管我只需要垂直調整大小。 jsFiddle使用了mooTools，但我想用jQuery來完成。

一個重要的複雜情況：我不知道分隔符上面div的大小，直到它實際上是動態構建的，所以我不能從一個絕對定位開始。

什麼是最好的前進方向？我有一種感覺，如果我沒有問過，我只是重新發明輪子:)

[順便說一句：有些相似名稱的問題與jsFiddle例子不起作用有關（例如，this）。

到目前爲止，我已經使用這個：

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

不用說，它不幹活的權利呢。

來源

2012-06-16 Nick

如果插件會做，你可以試試這個： http://jqueryui.com/demos/resizable/ – Playmaker

是的，我看了看這個，@Playmaker，雖然我不知道如何使它工作。 Draggable似乎是一個更好的選擇。 – Nick

Draggable用於拖放，如果我是對的，則需要調整大小。 – Playmaker

如果有人有興趣在未來，我得到了它與這個很好地工作：

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

這是fiddle。使用clone是關鍵。可拖動的元素（.rsh）是相對的，所以如果您不使用克隆，則元素移動的距離是鼠標的兩倍，因爲它也受到之前div高度變化的影響。

注意：- 85只是頁眉佈局允許的標題等等。

來源

2012-06-16 09:41:51 Nick

這是Nick代碼的一個版本（這非常有幫助，謝謝！），允許後續分隔符保持靜態。它的工作原理是調整拖動分隔線上下的div的大小。

$('.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); 
    } 
});

來源

2012-08-31 13:34:33 Flam

很高興有幫助:) – Nick

這是尼克版本的另一種替代方法，它會自動將水平處理程序移動到頂部並作爲一個很好的效果移動到零。此外，它調整兩個部分的高度尺寸相互。

$('.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); 
       } 
     } 
    });

來源

2013-12-19 14:06:27

通過拖動分隔線處理程序來調整元素大小

回答

相關問題