Question

我想创建一个可以添加多个子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的，没有调整大小必须变小）

示例：600px上有一个栏。有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/

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

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

1 个答案: