Drag And Drop - Shopping basket

Available products
{{product.name}} - ${{product.cost}} (available: {{product.quantity}})
{{product.name}} (NOT available)
Shopping Basket (to pay: ${{shoppingCtrl.totalCost()}})
{{product.name}} (ordered: {{product.quantity}} cost: ${{product.cost * product.quantity}})

Drag And Drop - Move from list to list

To Do
{{item}}
Ongoing
{{item}}
Done
{{item}}

Drag And Drop - Custom Drag Image

Note: custom drag images are not supported in IE9/IE10.

Drag me
I show a custom image on drag
Drop here

Drag And Drop - Use multiple drop-zones

I can drop only in zone ONE
Drag me
I can drop only in zone TWO
Drag me
I can drop in both zone ONE or TWO
Drag me
Drop Zone ONE
Drop Zone TWO