Knockout + jQueryUI draggable/droppable – the end

In earlier posts, I went through the simple and a slightly more than simple implementations of using jQueryUI’s dragon drop with knockout. Now I’m going to round it out with my final post on the topic. This time, I’ll add binding capability to other properties of the draggables and droppables. I’m only going to demonstrate binding the ‘disabled’ option of both the draggable and the droppable, but you can use the same process for binding any of the options.

Example

The contrived example this time is a teacher’s seating chart. Go ahead and check out the example. The “Locked” checkbox is bound to the draggables ‘disabled’ option. The droppables get disabled when the seat already has a student in it.

The thing that’s different from last time is the implementation of the ‘update’ methods in the binding handlers. The update method gets called when the value of any of the ko.observables change, so I just get the observable from the valueAccessor() and call ko.utils.unwrapObservable() with that sucka, and you have the value to update the options with.

…shows how I bind the value of the isLocked viewModel property to the ‘disabled’ option of the drag (The checkbox is also bound to the isLocked viewModel property), and…

<tddata-bind=“drop: {value: student, disabled: !!student()}”>

…shows how I bind the ‘disabled’ option of the drop to the existence of a student in the seat.

Future

I might update this page sometime in the future to add other options bindings, or to add new functionality. For example, there’s a spot already for a hook to add a ‘revert‘ event to the draggable inside the if (!_hasBeenDropped) block.

That’s a really nice article. Now I am diving into knockout+drag’n’drop and it’s wonderful!
I built a project without jqueryUI (and some data on the nodes, bound with observables, of course) and it works . Site will be launched soon, and then I’ll look at sharing the code, too.
Thank you for posting this!