Knockout + jQueryUI Draggable/Droppable

I recently wanted to create a simple game with my son that was very drag-n-drop-centric. I knew I’d use JqueryUI for the drag/drop, so I coded it up, took a step back, and realized that my code was seriously ugly. There was way too much DOM interaction in my code. What it needed was some Knockoutjs!

So this blog post will be the first in a series building up a drag-n-drop knockout custom binding. I’ll start out simple in this post, and build it up to be more feature-rich in later posts. In this post, we’ll learn about:

The contrived task… a pizza builder. Take a list of toppings for a pizza that are in json, and drag the toppings onto the pizza, resulting in toppings data in my pizza json.

Knockout is all about binding data to the UI, so my drag-n-drop implementation will drag and drop DATA, and the UI will just represent that… you’ll see what I mean – especially if you look at the jsfiddle of it.

Here’s the html:

1<ulid=“toppings”data-bind=“foreach: toppings”>

2<lidata-bind=“text: $data, drag: {value: $data}”></li>

3</ul>

4<br>

5<!– ko with: pizza –>

6<divid=“pizza”data-bind=“drop: {value: latestTopping}”>

7<divdata-bind=“visible:(!!latestTopping())”>

8<p>

9 Thanks for adding <spandata-bind=“text:latestTopping”></span>!</p>

10<span>So far, you’ve added:</span>

11<uldata-bind=“foreach: toppingStack”>

12<lidata-bind=“text: $data”></li>

13</ul>

14</div>

15</div>

16<!– /ko –>

Notice the drag: {value: ___} and drop: {value: ___}. That just says that I’m dragging one of the values from the toppings (see the foreach on line 1) and when it’s dropped, it’ll update the the latestTopping property (line 6) on the pizza (line 5). Small note: I could have simply used drag:$data instead of drag: {value:$data}, but I know I’ll have more options to add later.

…and the Pizza function just defines a latestTopping property that is a knockout observable.

I wanted to know all the toppings ever added to the pizza, so the latestTopping property makes use of ko.computed so that the write adds the value to an array and the read just reads the most recently added topping. So here’s the Pizza:

First thing to note is that it is inside a self-executing function (note the “()” on the last line). The reason that is done is so that the variables declared at the top are hidden from the global scope.

A couple of notes about the variable “_dragged”:

I named it with an underscore just so it would stand out to me as a closure from a scope outside where it is written and read. No big deal.

I didn’t have to use a variable for that. I could have stuck it in the data of the html element being dragged (that is: $(element).data(“key”, “value”)), but I made the assumption that only one thing could be dragged at a time and I figured with a single variable to hold it, I wouldn’t leave data lying around tied to DOM elements or have to worry about cleaning them up.

For a custom bindingHandler, you have to implement one or both of the methods init and update. For now, I only need the init. Inside the drag’s init method and the drop’s init method, everything looks pretty typical for the jqueryui draggable and droppable, except for just a few things.

Notable items from the drag’s init function:

I used the option “helper: ‘clone'” and “revert: true” because I wanted to only effectively drag around DATA, and not actually move DOM elements around. I let the bindings do their magic and leave the DOM elements where they originate. Don’t worry, in a later post, I’ll discuss how to make it appear that the elements are actually moving, but in this example, the pizza toppings stay in the toppings list forever. They do appear to be ‘added’ to the pizza, but that is just plain-old data binding at work. Besides, you probably want to be able to add bacon to the pizza multiple times.

Line 11 is where the _dragged variable is set from the observable you declared to be draggable in the data-bind=”drag:{value: ___}”

Notable items from the drop’s init function:

line 24 is where the observable you declared to be droppable in the data-bind=”drop: {value: ___}” gets set from the _dragged variable.