jquery - 你能用 CSS 和 jQuery 创建 "conjoined rectangles"吗？

Question

是否可以使用 CSS 和 jQuery 来创建具有以下特征的“矩形行”？

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

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

• 整个矩形行是可拖动的(可移动的)。
• 拖动垂直边框 i 会调整它之前的矩形(如果有)和它后面的矩形(如果有)的大小。
• 矩形可以有不同的颜色。

下面是一些伪代码。

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

这是一些非常粗糙的代码。我没有测试它，也不打算测试它(你的工作就是让它发挥作用)。如果您有这样的 HTML(加上 CSS 以获得适当的高度和宽度，并将它们 float 或定位为内联):

<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 插件处理，我相信。