Drag and drop with ember.js and jQuery sortable is actually pretty easy. However there are a few tricks that I would like to share.
View and Template
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
1 2 3 4 5 6 7 8
In order to bind the sortable plug-in to the DOM we use the
didInsertElement function. This function is called when the view’s
element is in the DOM and ready to be manipulated.
sortable on the list view that has the CSS class
This will bind jQuery UI’s sortable plug-in to our DOM element.
The only function we have to implement is the update function. This function is called when the sortable plug-in has finished sorting and the DOM is updated.
What we want to do in the update method is create an index of model ids with their new sort position. We can accomplish that by looping over the items in the list, grabbing the data-id and assigning it the value of the index.
Once we have created an index we need to cancel the sort. This is because we are going to update the model to reflect the new sort order.
1 2 3 4 5 6 7 8 9 10 11 12
We can simply loop over the items in the array and update their idx. This will cause the list view to rerender with the correct sort order.
I hope this saves you some hair pulling and a bit of time.
You can see this in action in the playlist section at flowfeeds.com. You will need to sign up for an account to access it though, sorry.