How to properly bind jquery ui behavior to meteor?

Question

I am trying to create a group of draggable DOM objects using jQuery UI .draggable() , which are populated via Meteor subscriptions. The code I came up with looks like

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

They correspond to some calls to Meteor.publish() , so at any time when the collection changes, the behavior of .draggable() will be bound. At least that was my intention.

However, it works only once - when one of these <li> been dragged and deleted, then they are no longer dragged.

When objects are discarded, I fire a custom event attached to the Template for an element like this

  $( "#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' }}); } }; 

So, I think this collection change in drop should propagate through the pub / sub process and re-run the .draggable() above. But that is not like that.

The full code for this can be seen here https://github.com/sbeam/in-out/blob/master/client/inout.js , and the application runs in http://inout.meteor.com/ mode (there are some others probably unrelated problems with elements that accidentally lose their value or even disappear from the user interface)

So, if my understanding of how pub / sub works in Meteor, it would be nice to know. Or is there a more efficient way to achieve this binding of user interface behavior that works without it?

Answer 1

As I implemented this in my applications, this is the method shown by @lashleigh.

I have a template event that listens for this code as follows:

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

Then I listen to dragstop like this.

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

You can see the application using this code at aduno.meteor.com