Drag-and-drop Sortable List in Meteor

Question

How would you make this?

The items in the list could correspond to records in a collection, and their position in the list could correspond to a field on each record ("rank" perhaps) which would have to be updated when the 'stop' event occurred.

Would Meteor play nicely with jQueryUI Sortable? What would happen if multiple users attempted to drag and sort the same list at once? Would Meteor need a customized sorting behavior?

Answer 1

EDIT: The below answer is out of date, @cutemachine's answer or http://blog.differential.com/sortable-lists-in-meteor-using-jquery-ui is much closer to the state of the art.

---

The short answer is: this isn't easy if you want it to be reactive. To make a non-reactive version, just wrap your template in a {{#constant}} tag and hook up the jquery-ui sortable in render as @bento suggested.

To make a reactive version, your sortable widget is going to have to deal with things changing under it (think about being mid-drag when data re-orders itself). Here are some thoughts about how you would go about it:

1. Unfortunately, it's not going be easy to make it animate, which is going to lead to poor UX. Let's leave that aside for now.

2. Render the items with something like: {{#each items}} {{> item}} {{/item}}

   This will re-order itself when data comes down from the server (without animation).

3. Set up each item to be draggable when it renders. You could either

   i. Use something like jquery-ui draggable, and hook it up in render on the item template. You might have problems doing this as the underlying element may disappear during a drag if the ordering changes from upstream.

   ii. implement your own dragging code, perhaps using a lower level library.

4. When an item is dragged into position, immediately reorder the list locally (that way the user should see the right thing. Hopefully the server will respect the change.. but let's not get into that either).

I think there is a big need for such a widget, 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).