2

我想制作一个可以添加多个子 DIV 的栏（例如：http: //i.imgur.com/vTM7P9v.jpg）。我正在使用 jQuery、jQuery UI 和 Bootstrap。加上一些插件。div（或 span）系统可能如下所示：

<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

4

1 回答 1

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/

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

于 2013-02-21T21:49:22.897 回答