我正在尝试使用通过Meteor订阅填充的jQuery UI的.draggable()来创建一组可拖动的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>中的一个被拖放,那么它们就不再可拖动了.
当对象被删除时,我正在触发一个附加到项目模板的自定义事件,就像这样
$( "#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行为绑定？
解决方法
我在我的应用程序中实现此方法的方法是使用@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看到使用此代码的应用
