如何在meteor中正确绑定jquery ui行为?

如何在meteor中正确绑定jquery ui行为?,meteor,jquery-draggable,Meteor,Jquery Draggable,我正在尝试使用jQueryUI的.draggable()创建一组可拖动的DOM对象,这些对象通过Meteor订阅填充。我想出的代码看起来像 Meteor.subscribe('those_absent', function() { $( "li.ui-draggable" ).draggable( { revert: "invalid" } ); }); Meteor.subscribe('those_present', function() { $( "li.ui-drag

我正在尝试使用jQueryUI的
.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()
行为。至少,这是我的意图

但是,它只工作一次-一旦这些
  • 中的一个被拖放,那么它们就不再是可拖动的了

    当对象被丢弃时,我会触发一个自定义事件,该事件会附加到
    模板中

        $( "#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()
    行。但似乎没有

    完整的代码可以在这里看到,并且应用程序是live at(还有一些可能与项目随机丢失值或从UI完全消失无关的问题)


    所以,如果我对《流星》中酒吧/酒吧是如何运作的理解是错误的,那就很高兴知道了。或者有没有更有效的方法来实现这种UI行为绑定而不使用它?

    我在应用程序中实现这一点的方法是使用@lashleigh所示的方法

    我有一个模板事件,它使用如下代码侦听:

    Template.myDraggableItem.events({
        'mouseover .workItem' : function() {
            $(this._id).draggable();
        }
    });
    
    然后我就听这样的拖板

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

    您可以在

    和最近的网站上看到使用此代码的应用程序。我还不相信有一个干净、正确的方法可以做到这一点,但很多人都有黑客。谢谢@lashleigh-所以总结一下,现在,你需要在鼠标事件上附加
    draggable()
    或任何其他行为,例如,在“最后”可能的时刻。一种在触摸屏上工作的干净和正确的方式将是一个积极研究和贡献的好领域。确切地说,这是我见过大多数人使用的。另一种方法是在模板呈现后使用defer绑定;这将适用于触摸设备,但大多数人不赞成使用超时黑客。听起来我们需要一个后渲染挂钩来处理类似的东西。从长远来看,应该有一个内置的拖放模式。这似乎是正确的策略,所以接受了这一点(但仅供参考,你的应用程序中的拖放似乎存在一些问题,它停止了响应)嘿,太棒了,你正在尝试做与我相同的事情!Github的任务管理。流星似乎使拖放非常困难,而使其他事情更容易。我会看你的节目,祝你好运。顺便说一句,如果你能让看板工作起来,看板会是个杀手:)看看这个,有人已经让看板工作起来了:@Milimetric aw shieet,这就是我说的!流星并没有使拖放变得困难。。只需使用内置事件处理程序的模板。另外,我认为绑定jq的更好方法是使用模板的“渲染”挂钩;模板。MyDragableItem.rendered=function(){….}(meteor>0.4.0)