Drag and drop sortable ng:repeats in AngularJS?

Question

Is it at all easy to use jQuery.sortable on ng-repeat elements in AngularJS?

It would be awesome if re-ordering the items automatically propagated that ordering back into the source array. I'm afraid the two systems would fight though. Is there a better way to do this?

Is it possible that you update the js fiddle codes for angular js current version i.e. angular js 1.0.1. I tried to run the examples on jsfiddle by changing the version of angular js to 1.0.1 as per my requirements but then the code breaks and doesnot work. Kindly help.' Thanks ! — Basmah, Jul 25 '12 at 10:25
Im on board with that. Also looking for a working example for 1.0.1 :-) — Marco Johannesen, Jul 25 '12 at 16:08
Found this, which works in 1.0.1 - http://jsfiddle.net/007design/KHqbM/ — Marco Johannesen, Jul 27 '12 at 11:59
I've created a tutorial on how to do this in combination with JQuery UI. Very easy to do with a single directive. Explanation and examples can be found here: http://www.smartjava.org/content/drag-and-drop-angularjs-using-jquery-ui — Jos Dirksen, Dec 05 '12 at 21:00

score 79 · Accepted Answer · edited Jan 29 '21 at 08:00

79

Angular UI has a sortable directive,Click Here for Demo

Code located at ui-sortable, usage:

<ul ui-sortable ng-model="items" ui-sortable-update="sorted">
  <li ng-repeat="item in items track by $index" id="{{$index}}">{{ item }}</li>
</ul>

$scope.sorted = (event, ui) => { console.log(ui.item[0].getAttribute('id')) }

edited Jan 29 '21 at 08:00

Raz Buchnik

7,753
14
53
96

answered Aug 12 '12 at 16:50

Guillaume86

14,341
4
53
53

2
Notice that you should add `ng-model` with `ui:sortable`: `
– Vladimir Starkov Dec 19 '12 at 13:18
1

Any error in the console? Works in my chrome/windows 7, you can try to update the libs (jquery/jqueryUI/angular/angularUI) and see if it's solving your problem... – Guillaume86 May 17 '13 at 21:59
i'm getting an error too, it can't find the reference UI module. "Uncaught Error: No module: ui " – David Swindells Jun 03 '13 at 12:49
I changed the script URL to a CDN, it's fixed (chrome enabled MIME type checking, breaking js served from raw.github) – Guillaume86 Jun 03 '13 at 20:38
Damn. I was hoping there would be an option that doesn't involve jQueryUI. I'm building a site for mobile devices, and I don't want to have to download an entire library just for that one function. – elliottregan Jul 19 '13 at 00:29
If you don't need old IE support there is a few lightweight alternatives: http://stackoverflow.com/questions/4658300/jquery-sortable-without-jquery-ui – Guillaume86 Jul 19 '13 at 10:53
17

The jsfiddle example does not seem to work reliably. There are no errors but the order intermittently becomes out of sync. Tried in firefox and chrome – Chris Foster Nov 12 '13 at 13:29
Try the latest versions of angular and angular-ui. They are both moving fast, answers get outdated. – Guillaume86 Nov 22 '13 at 11:52
13

Any idea how to achieve this without jQuery? – Pavel Nikolov Jan 20 '14 at 09:27
you can create your own directive from another javascript component, see http://stackoverflow.com/questions/5333077/lightweight-alternative-to-jquery-uis-sortable – Guillaume86 Jan 24 '14 at 13:39
3

@Kugel did you even tried the last version of angular-ui sortable? At the rate angular evolve the demos get outdated very quickly: https://github.com/angular-ui/ui-sortable – Guillaume86 Apr 30 '14 at 16:05
Can this be applied to a table or does it have to be a list? – Kousha May 30 '14 at 01:38
You can use it on < tr > – Guillaume86 May 30 '14 at 08:41
@Guillaume86 How to use it for touch devices? – raghavsood33 Sep 27 '15 at 06:31

score 12 · Answer 2 · edited Oct 07 '20 at 16:39

I tried to do the same and came up with the following solution:

angular.directive("my:sortable", function(expression, compiledElement){
    return function(linkElement){
        var scope = this;
        linkElement.sortable(
        {
            placeholder: "ui-state-highlight",
            opacity: 0.8,
            update: function(event, ui) {
                var model = scope.$tryEval(expression);
                var newModel = [];
                var items = [];
                linkElement.children().each(function() {
                    var item = $(this);
                    // get old item index
                    var oldIndex = item.attr("ng:repeat-index");
                    if(oldIndex) {
                        // new model in new order
                        newModel.push(model[oldIndex]);
                        // items in original order
                        items[oldIndex] = item;
                        // and remove
                        item.detach();
                    }
                });
                // restore original dom order, so angular does not get confused
                linkElement.append.apply(linkElement,items);

                // clear old list
                model.length = 0;
                // add elements in new order
                model.push.apply(model, newModel);

                // presto
                scope.$eval();

                // Notify event handler
                var onSortExpression = linkElement.attr("my:onsort");
                if(onSortExpression) {
                    scope.$tryEval(onSortExpression, linkElement);
                }
            }
        });
    };
});

Used like this:

<ol id="todoList" my:sortable="todos" my:onsort="onSort()">

It seems to work fairly well. The trick is to undo the DOM manipulation made by sortable before updating the model, otherwise angular gets desynchronized from the DOM.

Notification of the changes works via the my:onsort expression which can call the controller methods.

I created a JsFiddle based on the angular todo tutorial to shows how it works: http://jsfiddle.net/M8YnR/180/

score 10 · Answer 3 · answered Feb 17 '12 at 16:09

This is how I am doing it with angular v0.10.6. Here is the jsfiddle

angular.directive("my:sortable", function(expression, compiledElement){
    // add my:sortable-index to children so we know the index in the model
    compiledElement.children().attr("my:sortable-index","{{$index}}");

    return function(linkElement){
        var scope = this;            

        linkElement.sortable({
            placeholder: "placeholder",
            opacity: 0.8,
            axis: "y",
            update: function(event, ui) {
                // get model
                var model = scope.$apply(expression);
                // remember its length
                var modelLength = model.length;
                // rember html nodes
                var items = [];

                // loop through items in new order
                linkElement.children().each(function(index) {
                    var item = $(this);

                    // get old item index
                    var oldIndex = parseInt(item.attr("my:sortable-index"), 10);

                    // add item to the end of model
                    model.push(model[oldIndex]);

                    if(item.attr("my:sortable-index")) {
                        // items in original order to restore dom
                        items[oldIndex] = item;
                        // and remove item from dom
                        item.detach();
                    }
                });

                model.splice(0, modelLength);

                // restore original dom order, so angular does not get confused
                linkElement.append.apply(linkElement,items);

                // notify angular of the change
                scope.$digest();
            }
        });
    };
});

I ended up just using SlickGrid for this, but I'll take your word that this works. — Nick Retallack, Jul 31 '12 at 20:43
One thing to note with this solution is that it will most likely not work as is with v1.x. It shouldn't be to hard to tweak this, but I haven't gotten around to updating all of my code yet. — respectTheCode, Aug 01 '12 at 15:15
@respectTheCode Have you re-factored the code to work with the latest AngularJS version (v1.0.1)? I can't for the life of me find a reliable working version for 1.0.1.... — Greg, Aug 12 '12 at 18:01
@Greg we are using Angular-UI's UI-Sortable now and it works great. https://github.com/angular-ui/ui-sortable — respectTheCode, Oct 11 '13 at 13:17

score 6 · Answer 4 · edited Apr 27 '15 at 00:45

6

Here's my implementation of sortable Angular.js directive without jquery.ui :

https://github.com/schartier/angular-sortable

edited Apr 27 '15 at 00:45

Brad Rem

6,036
2
25
50

answered May 10 '14 at 15:14

Sebastien Chartier

130
1
3

Dheeraj Nalawade · Answer 5 · 2016-02-01T07:47:41.567

0

you can go for ng-sortable directive which is lightweight and it does not uses jquery. here is link ng-sortable drag and drop elements

Demo for ng-sortable

edited Feb 01 '16 at 07:47

answered Feb 01 '16 at 07:29

Dheeraj Nalawade

404
3
6

Drag and drop sortable ng:repeats in AngularJS?

5 Answers5

Linked