Native HTML5 Drag and Drop - HTML5 Rocks

I wanted to add drag and drop to my ToDo list application, derived from this one.
I found a nice reference here: Native HTML5 Drag and Drop - HTML5 Rocks:

I had to modify the code just a bit to convert it to CoffeeScript. Here's the result.

Since I'm targeting HTML5 in good browsers (i.e. not IE) I removed some unnecessary code.

1. events:

2. <snip>

3. 'dragstart .todo-content': 'dragstart' #NEW FROM HERE SOUTH....

4. 'dragenter .todo-content': 'dragenter'

5. 'dragover .todo-content': 'dragover'

6. 'dragleave .todo-content': 'dragleave'

7. 'dragend .todo-content': 'dragend'

8. 'drop .todo-content' : 'drop'

9. <snip>

10. dragstart: (e) ->

11. @$el.addClass 'dragging'

12. TodoView.dragSrcEl = @

13. e = e.originalEvent

14. if e.dataTransfer.effectAllowed = 'move'

15. e.dataTransfer.setData('text/html', @el.innerHTML);

16. dragover: (e) ->

17. e = e.originalEvent

18. e.preventDefault()

19. e.dataTransfer.dropEffect = 'move'

20. dragenter: ->

21. @$el.addClass 'over'

22. dragleave: ->

23. @$el.removeClass 'over'

24. dragend: ->

25. @$el.removeClass 'dragging'

26. drop: (e) ->

27. e.stopPropagation()

28. # Don't do anything if dropping the same column we're dragging.

29. if TodoView.dragSrcEl != @

30. TodoView.dragSrcEl.el.innerHTML = this.el.innerHTML;

31. e = e.originalEvent

32. this.el.innerHTML = e.dataTransfer.getData('text/html');

33. @$el.removeClass 'over'

34. TodoView.dragSrcEl.el.removeClass 'dragging'

Copyright (C) Michael Wolf 2011 and beyond