One thing that was obviously missing to me was the ability to drag and drop the todo items into a specific order. I did eventually find another version of the app that did have drag and drop but it looked to be implemented with mootools. Now I haven’t quite gotten around to learning mootools yet. Bad I know. I’m highly dependent on jQuery at this time so I wanted to figure out how to do it with jQuery and more specifically jQuery UI.
Googling didn’t lead me to any ready-made solutions so I decided to try to figure it out on my own. So here’s the solution I came up with.
First things first, jQuery and jQuery UI need to be included for this to work:
Here’s what the entire template would look like:
1 2 3 4 5 6 7 8 9 10 11 12
The todo list itself is simply a unordered list element with an id of “todo-list”. Inside the top level view ‘Appview’ inside the initialize function, I called the jquery UI sortable function on that unordered list. The update function passed to sortable will run after the drag and drop ordering has occurred. In this function, I loop through all of the divs in the list, get a reference to the todo model using the value of the data-id attribute and update the order property. Backbone seemed to take care of the rest.
1 2 3 4 5 6 7 8 9
Check out this jsfiddle if you want to play around with it.
This seems to work just fine but at this point I haven’t used it in any production applications so use at your own risk. That and I am still a backbone newbie so if you have any better ideas, please let me know.