增加使用可拖動事件並排顯示的div的寬度

截至目前，我有兩個固定長度的div，它們通過動態地嵌入iframe來加載外部URL。 Divs出現在彼此旁邊 - 左側和右側。增加使用可拖動事件並排顯示的div的寬度

截至目前，我已將其寬度分別固定爲50%。但是，我想讓用戶可以靈活地增加任何div的寬度來輕鬆查看裏面的網址without scrolling horizontally。就像拖拽分隔兩個div的邊界，根據他的需要左右移動。

有沒有辦法實現這個目標？請建議任何圖書館或其他東西。

我已經經歷了一個庫twentytwenty這是用於圖像。我不知道如何爲動態內聯框架工作。

這裏是JSFiddle它顯示divs。

<div> 
    <div id="originalPage" style="width:54%;height: 730px;float:left"> 
     <p>one div </p> 
    </div> 
    <div id="diffReport" style="width:45%; height: 730px;float:right"> 
     <p>another div</p> 
    </div> 
</div>

來源

2013-10-31 roger_that

我不得不承認，這對我的工作太多了，但我會建議你創建懸停中央區域時更改光標的CSS。然後，爲mousedown/mouseclick附加處理程序。然後，當用戶移動鼠標時，您比較鼠標位置並設置div的新寬度。聽起來像是個計劃..？ – EricG

是的。我也在朝着同一個方向思考。 @Linus給出的答案會做我想象的技巧。 –

<div> 
    <div class="resizable" id="originalPage" style="width:54%;height: 730px;float:left"> 
     <p>one div </p> 
    </div> 
    <div class="resizable" id="diffReport" style="width:45%; height: 730px;float:right"> 
       <p>another div</p> 
    </div> 
</div> 

$(function() {$(".resizable").resizable({animate: true,animateEasing:'swing',imateDuration: 500 
});}); 

#diffReport, #originalPage{ 
     border: 1px solid; 
} 
.ui-resizable-helper { border: 1px dotted gray; } 
.resizable { display: block; width: 400px; height: 400px; padding: 30px; border: 2px solid  gray; overflow: hidden; position: relative; } 
#diffReport { width: 100%; height: 100%; } 
#originalPage { width: 100%; height: 100%; }

來源

2013-10-31 09:48:49

如果它工作，然後很酷的解決方案:) –

用#diffReport和#original的CSS寬度和高度播放一點，以實現你想要的。讓我知道如果沒關係。 –

這工作有點，但同時增加左div的寬度，正確的一個下降。並且沒有選擇通過拖拽用戶理想地需要的左邊界來增加右邊的寬度。可拖動的事件是可以的，但我們需要如果我們拖動一個div，其他的大小應該會自動減小，這樣它就不會下移。 –

var isDragging = false
var lastPageX = null
使在現有的中間有一個新的div。
在該div上附加一個事件偵聽器mousedown。
- 設置isDragging到true和lastPageX到event.pageX
上包圍的div附加一個事件監聽器mousemove。
- 只運行，如果isDragging
- var diff event.pageX - lastPageX
- 添加diff向左可調整大小的div
- 從右邊可調整大小的div
- 設置lastPageX到event.pageX
附加一個事件監聽器去除diffmouseup上document
- 設置isDragging到false

來源

2013-10-31 09:49:20

'將這個值添加到兩個可調整尺寸的div上，無法理解這一點。 –

對不起，我已經更新了答案以澄清 –

使用jQuery UI庫，以做調整/拖動。

HTML

<div id="demo"></div>

腳本

<script> 
    $(function(){$('#demo').draggable().resizable();}); 

    $('#demo') 
     .resizable({ 
      start: function(e, ui) { 
       alert('resizing started'); 
      }, 
      resize: function(e, ui) { 

      }, 
      stop: function(e, ui) { 
       alert('resizing stopped'); 
      } 
     }); 
</script>

小提琴被

http://jsfiddle.net/VuqbN/

更新您的提琴

http://jsfiddle.net/vw9qt/1/

來源

2013-10-31 09:51:19

有一個真棒jQuery插件，去與jQuery的分配器在這裏：

http://jquery.jcubic.pl/splitter.php

來源

2013-10-31 10:14:16 vinaykrsharma