2012-05-16 9 views
8

jQuery UIの.draggable()を使用して、ドラッグ可能なDOMオブジェクトのグループを作成しようとしていますが、これはMeteorサブスクリプションによって作成されます。私は流星のjquery UIの振る舞いを正しくバインドする方法は?

Meteor.subscribe('those_absent', function() { 
    $("li.ui-draggable").draggable({ revert: "invalid" }); 
}); 
Meteor.subscribe('those_present', function() { 
    $("li.ui-draggable").draggable({ revert: "invalid" }); 
}); 

これらのようなルックスを思い付いたコードは、いつでも、コレクションが変更されるように、.draggable()行動が添付されますが、いくつかのMeteor.publish()通話に対応しています。少なくとも、それは私の意図だった。

しかし、これは一度しか動作しません - これらのうちの1つがドラッグアンドドロップされると、もうドラッグできなくなります。オブジェクトが破棄された場合

、私のような項目についてTemplateに添付されたカスタムイベントを発射していますので、

$("#c_absent .inner-drop").droppable({ 
     drop: function(event, ui) { 
      ui.draggable.trigger('inout.leave'); 
     } 
    }); 


    Template.loftie_detail.events = { 
     'inout.leave': function (e) { 
      Lofties.update({_id:this._id}, {$set: {present: 'N' }}); 
     } 
    }; 

だから、私の考えでは、ドロップのコレクションにこの変更が伝播しなければならないということですpub/subプロセスを介して上記の.draggable()行を再実行してください。しかしそれはそうではないようです。

このための完全なコードはここhttps://github.com/sbeam/in-out/blob/master/client/inout.js見ることができ、アプリがhttp://inout.meteor.com/でのライブです

もしそうなら(アイテムのランダムな値を失うか、完全にUIから消えると他のいくつかのおそらく無関係な問題があります)の私の理解メテオのパブ/サブ作品がどのようにオフになっているかは、知っておくと良いでしょう。または、このUIビヘイビアバインドを実現するための効率的な方法がありますか?

+0

http://stackoverflow.com/questions/10453291/how-to-trigger-jquery-draggable-on-elements-created-byでこのコードを使っているアプリを見ることができます-templates/10509361#comment13641878_10509361 – lashleigh

+2

さらに最近http://stackoverflow.com/questions/10646570/how-to-handle-custom-jquery-events-in-meteor。私はまだそれを行うためのきれいで適切な方法があるとは確信していませんが、多くの人がハックをしています。 – lashleigh

+0

ありがとうございます@lashleigh - 要約すると、今のところ、 'draggable()'やその他の動作をマウスオーバーイベントに、つまり "最後の"可能な瞬間に添付する必要があります。タッチスクリーン上で動作するきれいで適切な方法は、活発な研究と貢献のための良い領域です。 – sbeam

答えて

4

私のアプリでこれを実装した方法は、@lashleighで示された方法です。

私はこのようなコードを使用してリスニングするテンプレートのイベントがあります

Template.myDraggableItem.events({ 
    'mouseover .workItem' : function() { 
     $(this._id).draggable(); 
    } 
}); 

それから私はこのようなdragstopを聞きます。

$('body').on('dragstop', '.myDraggableItem', function (e) { 
    // Update the collection with the new position 
}; 

あなたはaduno.meteor.com

+0

これは正しい戦略だと思われるので、これを受け入れる(しかし、あなたのアプリにドラッグ&ドロップで問題があるようだが、それは応答を停止した) – sbeam

+1

あなたは私と同じことをやろうとしている。 Githubのタスク管理。流星は、他のものをより簡単にしながら、ドラッグ・アンド・ドロップを非常に難しくしているようです。あなたのプロジェクトを見て、運が良ければ幸いです。あなたがそれを働かせたら、かんばんの板はキラーになるでしょう:) – Milimetric

+2

これを見て、誰かがすでにかんばんのようなものを手にしています:http://minitrello.meteor.com/ – Milimetric

関連する問題