Drag n Drop re-order ability in meteor.js ToDo app

Question

Obj:-

To add drag n drop ability in the meteor ToDo example app.

Why:-

Going through the learning curve.

What i can think of :-

Using jquery UI (as external js) and bind the update event to todo lists. having a data field on the li items, so as to execute update command from the same function itself.

Was wondering if there exists a more meteor-y approach..

Thanks!

Answer 1

From this answer and from Lloyd's answer above, here is the work-around:

<template name="todos">
...code...
  {{#constant}}
  {{sort_code}}
  {{/constant}}
</template>

--

<div class="todo-text" data-id="{{_id}}">{{text}}</div>

in todo.js

Template.todos.sort_code = function(){
Meteor.defer(function(){
$('#item-list').sortable({
  update: function(e,iq){
    $('div.todo-text',this).each(function(i){
            var id = $(this).attr('data-id');
            Todos.update(id, {$set:{order:i+1}});
  });
  },
});
$( "#item-list" ).disableSelection();
console.log('dd');

});
};

Answer 2

Meteor's templating engine (Spark) would redraw your TODO list on any change to the underlying data, which i expect would mess up normal operation of JQuery UI.

Consider using constant for your JQuery UI managed regions.