[This post follow and upgrade this older: Recursivity exercice with AngularJS]

Drag & drop:

I used the native html5 drag & drop api.
So it doesn’t work on mobile/tablet devices: http://caniuse.com/#feat=dragndrop

Animations:

Animations are done with the nice css library Animate.css
It is very easy to use it with angular and ngAnimate, see that (SASS syntax):

.li-condition {
    &.ng-enter {
        @include animation(pulse 0.4s);
    }
    &.ng-leave {
        @include animation(zoomOut 0.4s);
    }
    &.ng-move {
        @include animation(zoomIn 0.4s);
    }
}

.li-group {
    &.ng-enter {
        @include animation(flipInX 0.4s);
    }
    &.ng-leave {
        @include animation(zoomOut 0.4s);
    }
    &.ng-move {
        @include animation(zoomIn 0.4s);
    }
}

Angularjs 1.3:

Note that the new 1.3 ngRepeat as syntax is used there:

<li ng-repeat="element in data.elements | orderBy:'position' as filteredData track by element.id">...</li>

Like this, I can use the filteredData variable inside this scope node without recalculating it.

Try it:

There is a graphical bug/weird behavior linked to ngMove:

You can reproduce it by move an element down on same level, animations occurs not on the moved element but on all others between old and new position..

I found this issue on github with this example who explains it very well:
http://plnkr.co/edit/4yRkLWbsU57YxrYOrWUQ?p=preview
But there is no solution yet.