How to make some elements draggable and other droppable using HTML5?

Question

I want to drag some elements and drop it in some other containers. The following example works for objects that are both draggable and droppable

http://jsfiddle.net/AwCuM/

But when I try to make some of them draggable and others only droppable it doesn't work

http://jsfiddle.net/4adJk/10/

I know how to use jQueryUI to do this, but I want to do the same using pure HTML5.

Answer 1

Looking at Mozilla's HTML docs I found that I need to handle the dragover event. The complete solution can be viewed at:

http://jsfiddle.net/Dema8/7/