I’m working on an app with a draggable list of components, which are backed by a collection. The desired functionality is that when the user drags around these components to reorder them, their ‘order’ property is updated to reflect this, and the document updates accordingly. The dilemma is: once a drag and drop is completed, and the rank of the relevant component is updated, blaze will attempt to re-render the list of components to maintain rank order. However, since the components was already physically moved in jqueryUI, Blaze ends up moving it back, so it gets swapped twice and remains in the same place, out of sync, until a refresh.
The first solution is to cancel the jqueryUI drop event and let the changes to the data alone drive the re-ordering of the list. This seems to be what is recommended by meteor. It worked okay at first, but as the accompanying data update become more complicated (e.g. adjusting the rank of the other components once is dragged), the delay has become noticable, so you’ll drop an item, see it snap back to its origin (because jqueryUI’s drop is canceled), then a half second later it jumps back to its correct new place as blaze updates it. The other problem is that these components are focusable, and when a move like this is done, the component in slot n retains focus, instead of focus moving around with a components as it is moved around. Essentially, with this method, all UI state not reflected in the data is lost on a drag.
The other option, to forgo reactiviy altogether and rely only on jqueryui draggable, is not really workable either. We want these component lists to be editable by multiple people at once, and updated in real time as people move them around.
Has anybody encountered a problem like this? What was your solution?