Meteor + JQuery-UI Sortable + Animation + Todos

Animation and drag-n-drop on Meteor is still more a dream than a reality. Craftsmen find ways to implement such things, but as the study shows, this is a detour of the main meteor development patterns.

This post is about how I tried to screw the animation and sorting to the famous todos example.

Introduction

The meteor developers promise that they are working on the possibility of using jQuery-UI Sortable or its similarity. But I have not yet found how to touch it.
')
But with the animation while the light is not visible. Tom Coleman writes about this:

I think there is a need for such a widget, a done in a meteoric way. It's on my personal radar (but so are a lot of things, including a nice way to re-order with animation).

It so happened that I needed it yesterday, so I tried to see what the difficulties of implementation were there.

What happened

In short, a couple of days of research and experimentation resulted in a githaba code: meteor-todos-sortable-animation . There I tried to describe in detail how to use it.

You can see the demo . Open two windows at the same time and watch the changes in the second, while dragging tudushki in the first. If someone already does it there - you can chat with him in the mini-chat.

In particular, it works there:

1. Sort tudushek.
2. Sort sheets.
3. Sort animation on another client.
4. Animating the removal and addition of elements.

Development began for tudushek. After completion in 10 minutes I managed to fasten the same for the list of sheets. Actually for the sake of rapid reyuz this was done.

Bugs

The main bug that I couldn’t get rid of is the inability to re- Meteor.render template created through Meteor.render . If the data has changed, the code deletes the old fragmet and creates a new one. Because of this, preserve features do not work.

There were a lot of problems with neat changes to DOM elements. Both Meteor and Sortable work very dynamically with the DOM, I had to befriend them.

Solution tricks

One of the main know-how of the solution is the use of incremental DOM changes followed by successive change signals from the Meteor cursor observer .

At the same time, to resolve conflicts with DOM between Meteor and Sortable, taking into account the delayed animation, an event queue is created. A queue blocks changes and sequentially performs one change after another.

Thus, it simulates the same sequential changes that Meteor itself would do, but with delays for the animation.

Conclusion

First of all, it should be noted that it turned out to be a relatively quick way to tie drag-n-drops and animation to the lists.

I expect that this solution, although it is a hack, is still as close as possible to the meteor pattern. And this means that when Meteor will be able to do the same himself, it will be easy to remake the ready-made code of a large application with hacks into a regular scheme without hacks.

In the process of development, I came across very difficult bugs to be caught. Maybe not all caught. Wishing to ask to test. I would be glad if the solution is considered by more experienced developers who will tell you how to improve it.