jQuery UI: Dragging Data Around

The draggable and droppable interaction widgets are great for taking any element and adding DnD behavior. Users can drag one element, and drop it into another. But, the draggable and droppable widgets aren't assigned to elements arbitrarily — they're based on some application logic. The data model that drives the application probably has something that represents an element visible to the user. For example, there might be a database table row corresponding to the product I'm looking at right now. That product might hold a reference to some parent object — a category or a cart for example. When the user re-arranges elements on the screen, they're doing so in order to change the state of the element, and not physically relocating it. So what's the best way to go about manipulating the application data using these widgets?

jQuery UI: Droppable Fundamentals

The draggable and droppable jQuery UI interaction components are cool.  But it turns out that after a recent experiment, I discovered a few things I had gotten wrong with the widgets in the past.  For example, reverting the draggable back to its original position on a failed drop, highlighting the droppable target while dragging, and changing the state of the draggable while dragging.  These are just the visible behaviors that help the user out.  There are a few things I'd got wrong with the code in the past too, so I've put together an example to illustrate some fundamental principles when working with these interactions.  Check out the comments in the code.