meteor.js ToDo 应用程序中的拖放重新排序功能

Question

对象：-

在流星待办事项示例应用程序中添加拖放功能。

为什么：-

经历学习曲线。

我能想到的是：-

使用 jquery UI（作为外部 js）并将更新事件绑定到待办事项列表。在 li 项上有一个数据字段，以便从同一函数本身执行更新命令。

想知道是否存在更流星的方法..

谢谢！

Answer 1

从这个回答和从Lloyd的答案以上，这是工作 -

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

});
};

.

Answer 2

Meteor 的模板引擎 (Spark) 会在底层数据发生任何更改时重新绘制 TODO 列表，我预计这会扰乱 JQuery UI 的正常操作。

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