Question

我正在使用angularjs指令http://marceljuenemann.github.io/angular-drag-and-drop-lists/来拖动＆amp;把东西放在页面上。

我不知道这是否是我所需要的最好的。

我重现了演示

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

小提琴

我需要的是在容器上添加更多列。我已经添加了第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%;
}

如果您希望Container 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/

Angularjs指令拖拽＆amp; drop，需要添加列

1 个答案: