how to properly bind jquery ui behaviors in meteor?

Question

I am trying to create a group of draggable DOM objects using jQuery UI's `.draggable()` that are populated through 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" } ); }); ``` These correspond with some `Meteor.publish()` calls, so that any time the collection changes, the `.draggable()` behaviour will be attached. At least, that was my intention. However, it only works once - once one of these `<li>`'s has been dragged and dropped, then they are no longer draggable at all. When the objects are dropped, I'm firing a custom event that is attached to the `Template` for the item like so ``` $( "#c_absent .inner-drop" ).droppable({ drop: function( event, ui ) { ui.draggable.trigger('inout.leave'); } }); Template.loftie_detail.events = { 'inout.leave': function (e) { Lof…

Accepted Answer

The way I have implemented this in my apps is with the method shown by @lashleigh.

I have a template event that listens using code like this :

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

Then I listen for the dragstop like this.

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

You can see the app that's using this code at aduno.meteor.com

how to properly bind jquery ui behaviors in meteor?

Solution

Problem

Related problems