Nested sorting between rows and columns

Question

For a project I would like to use Angular and ui-sortable to be able to sort a list, divided in rows and columns. It is not a table, instead I want to use a div, using bootstrap classes to add rows and col-md classes to appear as a table. I made a codepen that resembles the functionality I want to achieve. Rows can be sorted by drag and drop, with a bit of a hassle. But within a row I can't change the sort order of the columns.

An example for the codepen I am using: I want to be able to change element A | B to B | A. And I would also like to be able to move A | B under C | B

<div class="form-container" ui-sortable="sortableRows" ng-model="filtered">
    <div ng-repeat="row in filtered">
      <div class="row rowborder">
        <div ui-sortable="sortableCols" ng-model="row">
           <div ng-repeat="col in row">
             <div class="col-md-6 colborder">
                 {{col.entry}}
             </div>
           </div>
        </div>           
     </div>
</div>

Nelis · Accepted Answer · 2014-12-24 08:08:06Z

0

I got a solution to my problem from another user. There was a structural problem in the HTML. You can find the solution in this codepen.

<div class="form-container" ui-sortable="sortableRows" ng-model="filtered">
      <div ui-sortable="sortableCols" ng-model="row" ng-repeat="row in filtered" class="row rowborder">
        <div ng-repeat="col in row" class="col-md-6 colborder">
          {{col.entry}}
        </div>
      </div>
 </div>

answered Dec 24, 2014 at 8:08

Nelis

12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested sorting between rows and 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