Sort or Rearrange Rows of a table in angularjs (drag and drop)

Question

I wanted to have the functionality of rearranging rows in a table (sorting rows using drag and drop). And the index of the row arrangement should also change in the model.

How can I do something similar to this : http://jsfiddle.net/tzYbU/1162/ using Angular Directive?

I am generating table as :

<table id="sort" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th class="header-color-green"></th>
      <th ng-repeat="titles in Rules.Titles">{{titles.title}}</th>
    </tr>
  </thead>
  <tbody ng-repeat="rule in Rules.data">
    <tr>
      <td class="center"><span>{{rule.ruleSeq}}</span></td>
      <td ng-repeat="data in rule.ruleData">{{statusArr[data.value]}}</td>
    </tr>
  </tbody>
</table>

Answer 1

I did it. See my code below.

HTML

<div ng:controller="controller">
    <table style="width:auto;" class="table table-bordered">
        <thead>
            <tr>
                <th>Index</th>
                <th>Count</th>
            </tr>
        </thead>
        <tbody ui:sortable ng:model="list">
            <tr ng:repeat="item in list" class="item" style="cursor: move;">
                <td>{{$index}}</td>
                <td>{{item}}</td>
            </tr>
        </tbody>{{list}}
        <hr>
</div>

Directive (JS)

var myapp = angular.module('myapp', ['ui']);

myapp.controller('controller', function ($scope) {
    $scope.list = ["one", "two", "thre", "four", "five", "six"];
});

angular.bootstrap(document, ['myapp']);

Answer 2

There is another library: RubaXa/Sortable: https://github.com/RubaXa/Sortable

It is for modern browsers and without jQuery dependency. Included is a angular directive. I'm going to check it out now.

You get good touch support additionally.

Answer 3

AngularJS was not really built for the manipulation of DOM elements, rather to extend the HTML of a page.

See this question and this Wikipedia entry.

For DOM manipulation, jQuery/mootools/etc will suite you just fine (hint: the example in your jsFiddle link).

You could probably use AngularJS to keep track of the ordering of your elements to update your model. I'm not sure how to do this using directives, but the following code may be useful

var MyController = function($scope, $http) {
    $scope.rules = [...];
    ...

}

var updateRules = function(rule, position) {
    //We need the scope
    var scope = angular.element($(/*controller_element*/)).scope(); //controller_element would be the element with ng-controller='MyController'

    //Update scope.rules
}

Then when you reorder the list, simply call updateRules() with the changed rule and its new position in the model.

Answer 4

Anyone else who wants something like this but not understanding the accepted answer. Here is a directive UI.Sortable for AngularJS that allows you to sort an array/ table rows with drag & drop.

Requirements

JQuery v3.1+ (for jQuery v1.x & v2.x use v0.14.x versions)
JQueryUI v1.12+
AngularJS v1.2+

Usage

Load the script file: sortable.js in your application: (you can find this sortable.js from here

<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>

make sure you have included JQuery, AngularJs and JQueryUI js files in order before this sortable file Add the sortable module as a dependency to your application module:

 var myAppModule = angular.module('MyApp', ['ui.sortable'])

Apply the directive to your form elements:

<ul ui-sortable ng-model="items">
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

Developing Notes:

1. ng-model is required, so that the directive knows which model to update.
2. ui-sortable element should contain only one ng-repeat
3. Filters that manipulate the model (like filter, orderBy, limitTo,...) should be applied in the controller instead of the ng-repeat

3rd point is very Important as it took almost an hour to understand why my sorting was not working?? It was because of orderBy in html and that was resetting the sorting again.

For more understanding you can check the detail here.

Answer 5

If I understand you correctly, you want to be able to sort the rows? If so, use UI-Sortable: GitHub Demo: codepen.io/thgreasi/pen/jlkhr

Answer 6

Along with RubaXa/Sortable there is one more angularjs library avilable that is angular-ui-tree. Along with drag and drop we can arrange elements in a tree structure and we can add and delete elements (nodes)

Please see the this link for examples

http://angular-ui-tree.github.io/angular-ui-tree/#/basic-example .

Please see this for github

https://github.com/angular-ui-tree/angular-ui-tree.