你可以使用CSS和jQuery創建「連體矩形」嗎？

Question

是否可以使用CSS和jQuery創建一個「矩形行」，並具有以下功能？

vertical  vertical  vertical 
border0  border1  border2 
+----------------+------------+  /\ 
|    |   |   | 
| rectangle0  | rectangle1 |   | fixed height 
|    |   |   | 
+----------------+------------+  \/

    resizable  resizable 
<--------------> <----------> 

• 整個矩形行是可拖動的（可動）。
• 拖動垂直邊框我調整它之前的矩形，如果有的話，以及其後的矩形，如果有的話。
• 矩形可以有不同的 顏色。

下面是一些僞代碼。

CSS：

.rectangle-row { 
    .rectangle0 
    .rectangle1 
} 

.rectangle0 { 
    width: 60px; 
    background: pink; 
} 

.rectangle1 { 
    width: 30px; 
    background: yellow; 
} 

的Javascript（使用JQuery）：

$(".rectangle-row").draggable(); 

$(".rectangle-row").resizable({ 
    minHeight: 40; 
    maxHeight: 40; 
}); 

$(".rectangle0").resizable(); 
$(".rectangle1").resizable(); 

Answer 1

Try out my fiddle。我試圖做到這一點與浮動divs問題是我沒有看到一種方式來取消resize事件時，所有矩形的寬度總和溢出容器。可能需要一個自定義大小調整插件。

<div class="row"> 
    <div class="first rectangle"></div> 
    <div class="rectangle"></div> 
    <div class="rectangle"></div> 
    <div class="last rectangle"></div> 
</div> 

JS

Array.prototype.sum = function() { 
    return (! this.length) ? 0 : this.slice(1).sum() + 
     ((typeof this[0] == 'number') ? this[0] : 0); 
}; 
var maxW = $('div.row').width(); 

$('div.rectangle').resizable({ 
    minHeight: 45, 
    maxHeight: 45, 
    containment: 'parent', 
    resize: function(event, ui) { 
     var allW = $('div.rectangle').map(function(){ return $(this).width();}).get().sum(); 
     if(allW >= maxW){ // overflow, no way to stop 
      event.stopPropagation(); 
      event.preventDefault(); 
      return false; 
     } 
    } 
}); 

Answer 2

這是一些非常粗糙代碼。我沒有對它進行測試，也不打算（你的工作是使它工作）。如果你有HTML像這樣（加上適當的高度和寬度CSS和浮動或它們共線位置）：

<div class="area"> 
    <div class="vertical_border">(Remove me: Just a 1 pix wide border)</div> 
    <div class="rectangle">Hello I'm a rect</div> 
    <div class="vertical_border"></div> 
    <div class="rectangle">Hello I'm a rect</div> 
    <div class="vertical_border"></div> 
    <div class="rectangle">Hello I'm a rect</div> 
    <div class="vertical_border"></div> 
</div> 

和JS是這樣的：

var startX; 
var leftRect = null; 
var rightRect = null; 
var isMoving = false; 

$('.vertical_border').mousedown(function(e) { 
    // Get the initial position of the mouse when you first click 
    isMoving = true; 
    startX = event.pageX; 
    leftRect = $(this).prev('.rectangle'); 
    rightRect = $(this).next('.rectangle'); 
}); 

$('.area').mousemove(function(e) { 
    // Updated the rectangles as the mouse is held and moving 
    if(isMoving) { 
     deltaX = e.pageX - startX 
     // If you move the cursor left, deltaX is negative, so leftRect gets smaller 
     leftRect.css('width', parseInt(leftRect.css('width')) + deltaX); 
     // and rightRect gets bigger 
     rightRect.css('width', parseInt(rightRect.css('width')) - deltaX); 
    } 
}); 

$('.area').mouseup(function(e) { 
    // Disallow the rects from moving anymore when the user lets go 
    isMoving = false; 
}); 

拖放可以通過以下方式處理我相信其他的jQuery插件。

Answer 3

理論上，是的。我沒有真正掀起一個原型的時間，但我設想用簡單的標記做它：

<div id="container"> 
    <div id="rectangle1"></div> 
    <div id="rectangle2"></div> 
</div> 

其中兩個孩子的DIV的浮動。

您可以將#rectangle1設置爲可調整大小（通過jQueryUI），並將尺寸限制爲#container（如果您願意）。

會發生什麼情況是，要拖動的垂直邊框本質上就是#rectangle1的右邊框。您可以編寫一些腳本來調整#rectangle2的大小，以及連接到可調整大小的resize事件。

（檢查docu page兩個約束和resize事件）

UPDATE

這裏有一個工作原型：jsFiddle

使用上面的標記，你可以：

1. 拖動容器矩形。
2. 調整的任何矩形除了最後
3. 和下一個矩形調整大小與它一起，以適應集裝箱
4. 同時限制容器內的調整大小，並且不影響其他矩形。

所有的代碼和標記都很少。