This is modified todos Meteor example.

Live demo on Meteor hosting: http://todos-dnd-animated.meteor.com.

Following features added:

1. sortable from jquery-ui used for drag-n-drop todos and todo lists.
2. Sorting animation displayed on other application clients while sorting.
3. Remove and add animation added.
4. Added url routing for tags filtering (just for fun).

I hope this feature will be added soon in Meteor as Avital Oliver written: Previewing Meteor's new rendering engine: reactive sortable lists

I need it now, so I had to implement something similar. I have not much of Meteor using experience, so any help or criticism will be appriciated.

Use animation.js file in your project to reuse drag-n-drop animations feature.

This will isolate item template and allows to identify each item.

<template name="list">
    <div data-id="{{_id}}">
        ...
    </div>
</template>

{{#each ... }} should not be used because of custom rendering method.

<template name="lists">
    <div id="lists">
    </div>
</template>

This step including following:

1. Prevents multiple useless rendered calls.
2. Stops observer if template switched to another context.
3. Defines items container.
4. Defines items cursor.
5. Defines item template.
6. Defines method of updating order.

Example for todos:

Template.lists.rendered = function() {

    var items = this.find('.s-items');
    if (!items) {
        return;
    }

    var $items = $(items);

    // Prevent multiple `rendered` calls on one list.
    // `rendered` called each time after `items.append`. Solve this by trigger.
    if ($items.attr('rendered')) {
        return;
    }
    $items.attr('rendered', true);

    // [animation] Init animation.
    var animation = createSortableListAnimation({
        el: 'div',
        $items: $items,
        template: Template.list,
        cursor: Template.lists.lists(),
        onSortableStop: function(event, ui) {
            var info = getItemOrderInfo(ui);
            if (info.oldOrder != info.order) {
                Lists.update(info._id, {$set: {order: info.order}});
            }
        }
    });

    this.handle = animation.observerHandle;
};

Inputs preservations will not work between binded data item changes.

I don't know yet how to rerender template using updated context data. So, for now, every time item data is updated - old item template will be deleted and new one will be created.

Anybody know to fix it?

sortable will work with element after mousedown. Don't make rerender events on mousedown, becuase sortable will not like it.

Not actually issue but can be odd: if many changes occurs - only first of them will be animated.

Also I want to implement following in next steps:

1. Generic mechanism to preserver rerendered templates state.

I'll be glad to receive any feedback or help on it. Fill free to make forks or issues.