如何正确绑定流星中的jquery ui行为？

Question

我正在尝试使用.draggable()通过Meteor订阅填充的jQuery UI创建一组可拖动的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()就会附加行为.至少,这是我的意图.

然而,它只能工作一次 - 一旦其中一个<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行为绑定？

Answer 1

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