javascript - 在同一空间添加和调整 DIV 的大小

Question

我想制作一个可以添加多个子 DIV 的栏(像这样:http://i.imgur.com/vTM7P9v.jpg)。 我正在使用 jQuery、jQuery UI 和 Bootstrap。加上一些插件。 div(或跨度)系统可能看起来像这样:

<div class="parent">
    <div class="child" id="1"></div>
    <div class="child" id="2"></div>
    <div class="child" id="3"></div>
</div>

“添加 div”可能如下所示:

$('parent').append('<div class="child" id="4"></div>');

而且我不知道其余的 jQuery/javascript 会是什么样子。 我遇到的最大问题之一是这里的其他威胁无法解决，我希望它也能在移动设备上运行。也许使用 Hammer.js

我已经找了很久了，但是如果已经发布了，我很抱歉

更新:如果我说得不够清楚，您必须拖动 div。就像您可以使用此插件一样 http://dev.iceburg.net/jquery/jqDnR/ , 但总宽度应保持不变(未调整大小的 DIV 必须变小)

示例:您在 600 像素上有一个栏。有 3 个子 DIV，每个为 200px。然后你调整其中一个的大小，所以它是 300px。然后其他的每个都是150px

Answer 1

是这样的吗？

HTML:

<input type="button" id="addChild" value="Add Child"/>
<div id="parent" class="parentClass">

</div>

jQuery:

var idGen = 0;
$("#addChild").on("click",function(){
    $("#parent").append("<div id='" + idGen++ + "' class='childClass'>Child Div</div>");
});

CSS:

.childClass
{
    background-color:#b0c4de;
    float:left;
    border:1px solid;
    padding:4px;
}
.parentClass
{
    background-color:green;
    width:500px;
}

JSFiddle:http://jsfiddle.net/Rrdyw/

我还没有测试过，但我相信这也适用于移动设备。