drag-and-drop - 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

Meteor 的模板引擎（Spark）会在对底层数据进行任何更改时重新绘制您的 TODO 列表，我预计这会扰乱 JQuery UI 的正常操作。

考虑constant为您的 JQuery UI 托管区域使用。

Answer 2

从这个答案和上面劳埃德的答案，这里是解决方法：

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

--

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

在 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');

});
};