8

.draggable()Meteorサブスクリプションを介して入力されるjQueryUIを使用して、ドラッグ可能なDOMオブジェクトのグループを作成しようとしています。私が思いついたコードは次のようになります

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

これらは一部のMeteor.publish()呼び出しに対応しているため、コレクションが変更されるたびに.draggable()動作がアタッチされます。少なくとも、それが私の意図でした。

ただし、これは1回だけ機能します。これら<li>のいずれかをドラッグアンドドロップすると、ドラッグできなくなります。

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から完全に消えたりする、他のおそらく無関係な問題です）

したがって、Meteorでのpub / subの動作についての私の理解がずれている場合は、知っておくとよいでしょう。または、それなしで機能するこのUI動作バインディングを実現するためのより効率的な方法はありますか？

4

1 に答える 1

4

これをアプリに実装する方法は、@lashleighで示される方法です。

次のようなコードを使用してリッスンするテンプレートイベントがあります。

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

それから私はこのようなドラッグストップを聞きます。 

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

このコードを使用しているアプリはaduno.meteor.comで確認できます。

于 2012-09-21T21:23:30.660 に答える