你可以使用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. 同时限制容器内的调整大小，并且不影响其他矩形。

所有的代码和标记都很少。