meteor - 如何在 meteor 中正确绑定(bind) jquery ui 行为？

Question

我正在尝试使用 jQuery UI 的 .draggable() 创建一组可拖动的 DOM 对象。通过 Meteor 订阅填充。我想出的代码看起来像

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()行为将被附加。至少，这是我的意图。

但是，它只能工作一次 - 一次是其中一个 <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' }});
      }
  };

因此，我的想法是，对 drop 集合的这种更改应该通过 pub/sub 进程传播并重新运行 .draggable()。上面的线。但它似乎没有。

完整的代码可以在这里查看 https://github.com/sbeam/in-out/blob/master/client/inout.js该应用程序位于 http://inout.meteor.com/ (还有一些其他可能不相关的问题，项目随机丢失值或完全从 UI 中消失)

因此，如果我对 Meteor 中 pub/sub 如何工作的理解不正确，那么很高兴知道。或者有没有更有效的方法来实现没有它的 UI 行为绑定(bind)？

Answer 1

我在我的应用程序中实现这一点的方式是使用@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 查看使用此代码的应用程序