ngRepeat comments breaks drag & drop between jquery-ui sortables

[egrajeda]

Hello!

I have an app which uses ngRepeat inside connected jquery-ui sortables and I'm getting some strange behaviour after 1.2.0. As far as I know it should happen in all browsers and OS.

There were a couple of issues open about this, but they were all in some way or another related to ngAnimate (#4786, #4954 and #5054). Even though I'm also having those issues, I'm having problems even after I strip all ngAnimate code.

I've made a Plunker to demonstrate the issue:

http://plnkr.co/edit/BVpHl8iZyKfI4snvrafR?p=preview

I've found the cause of this behaviour to be the <!-- end ngRepeat ... comments added in 9efa46a. The root of the problem being (I think) that when you drag and drop you are not moving the corresponding end comment.

@matsko wrote about this in #5054:

Alright so I finally got at this. Turns out you're moving around the elements using your own DOM code. This basically makes the repeater results and the DOM results out of sync and ngRepeat uses multiple comment anchors ontop of each list element to keep track of where they are. Then when ngAnimate runs, it doesn't know if it is dealing with a comment node or the element node. As a best practice, you don't want to do your own DOM stuff. Use a orderBy in your repeater and provide a scope function to handle the sorting (look at http://stackoverflow.com/questions/12040395/angularjs-custom-sort-function-in-ng-repeat#answer-12041694). If you really wanted do your own DOM sorting yourself then you might be able to get this to work by moving the comments around too, but don't do that :P

I'm not sure if this reply was addressing an issue like this, but if I were to try to do this I'll lack the drag & drop functionality.

So, I wanted to know if we should consider this a bug (and try/wait for a fix) or we should adapt our code to work with this behaviour. In the latter case, any advice in how to do it is appreciated because I really have no idea at this point :).

Also, seems like the folks at angular-ui/ui-sortable#64 and mostr/angular-ui-multi-sortable#12 are having similar issues.

Thanks for the great work!

[tbosch]

PRs welcome!

[matjaz]

try using https://github.com/angular-ui/ui-sortable/tree/angular1.2 It's working pretty solid.

[tbosch]

Yes,
I looked into angular-ui sortable, and the problem is that it changes them DOM elements without Angular knowing about it. It's just like @matsko said: Such a library is very hard to get to work with Angular, and Angular does not support that kind of directives.

How a sortable directive should work:

1. detect drag and drop
2. reorder the elements in the original data array
3. call scope.$apply so that Angular reorders the elements automatically (and by the way can also do animations, ...).

Here is a plunker that shows how to do drag and drop with Angular to implement a sortable list: http://plnkr.co/edit/oh7fQNbSsdKUTMDq0Nb6

P.S.:
Thanks @matjaz for creating a new integration between Angular and ui-sortable

[kamilkp]

Check out my PR in this matter: #6016

[kamilkp]

I have written a module to obtain a sortable behaviour with no jQuery nor jQueryUI needed whatsoever. And it also doesn't break the ngRepeat inner logic. The module can be found here and a demo here

[rpkrause]

Not so elegant workaround - http://plnkr.co/edit/u7J6sAUKK70pv3GnsSBa?p=preview