drag-and-drop - meteor.jsToDoアプリのドラッグアンドドロップ再注文機能

Question

Obj：-

流星のToDoサンプルアプリにドラッグアンドドロップ機能を追加します。

なぜ：-

学習曲線を通過します。

私が考えることができること：-

jquery UIを（外部jsとして）使用し、更新イベントをtodoリストにバインドします。同じ関数自体からupdateコマンドを実行するために、liアイテムにデータフィールドがあります。

もっと流星的なアプローチが存在するかどうか疑問に思っていました。

ありがとう！

Answer 1

Meteorのテンプレートエンジン（Spark）は、基になるデータに変更があった場合にTODOリストを再描画します。これにより、JQueryUIの通常の操作が台無しになると思います。

constantJQueryUI管理対象リージョンに使用することを検討してください。

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

});
};