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

Solution 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']);

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

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

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