Angularjs directive to drag & drop , need to add columns

Question

I'm using the angularjs directive http://marceljuenemann.github.io/angular-drag-and-drop-lists/ to drag & drop things over the page.

I don't know if this is the best for what I need.

I've reproduce the demo

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

in a fiddle

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

What I need is to add more columns on the container. I've added the 13th item and it goes to bottom and right. What I need is this one goes in the same row as Item 9 and Item 12, on the right. Something like:

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

Any help will be appreciatte.

Thanks in advance.

Cláudio Alves · Accepted Answer · 2016-04-20 14:48:56Z

As default, the column class is defined with a width of 50%, which represents a total space for 2 columns inside a container, and that's why the Item 13 doesn't show up in the expected position:

.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%;
}

If you want your Container 2 to have 3 columns, then the width should be 33,333%.

To make the width dynamic according to the number of columns in each container, you can add a ng-style to calculate the available width:

<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>

Check the changes here: http://jsfiddle.net/bk36gazj/

Collectives™ on Stack Overflow

Angularjs directive to drag & drop , need to add columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related