javascript - Angularjs指令拖放，需要添加列

Question

我正在使用 angularjs 指令 http://marceljuenemann.github.io/angular-drag-and-drop-lists/将内容拖放到页面上。

我不知道这是否最适合我的需要。

我已经重现了演示

http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested

在 fiddle 中

http://jsfiddle.net/5yogbajq/16/

我需要的是在容器上添加更多列。 我添加了第 13 个项目，它位于底部和右侧。 我需要的是这个与右侧的第 9 项和第 12 项位于同一行。 类似于:

<tr>
<td>item 9</td>
<td>item 12</td>
<td>item 13</td>
</tr>

任何帮助将不胜感激。

提前致谢。

Answer 1

默认情况下，列类的宽度定义为 50%，这代表容器内 2 列的总空间，这就是项目 13 没有显示在预期位置的原因:

.dropzone .container-element .column {
    float: left;
    border-top: 1px dashed black;
    border-bottom: 1px dashed black;
    border-left: 1px dashed black;
    border-right: 1px dashed black;
    width: 50%;
}

如果您希望容器 2 有 3 列，则宽度应为 33,333%。

要根据每个容器中的列数动态调整宽度，可以添加 ng-style 来计算可用宽度:

<div class="container-element box box-blue">
    <h3>Container {{item.id}}</h3>
    <div class="column" ng-style="{'width': 100/item.columns.length + '%'}" ng-repeat="list in item.columns" ng-include="'list.html'"></div>
    <div class="clearfix"></div>
</div>

在此处检查更改:http://jsfiddle.net/bk36gazj/