HTML5 - code example of drag and drop on a web page

The key methods to implement d&d are basic and easily implemented as follows:

1. function dragIt(target, e) {
2.     e.dataTransfer.setData('SpanImg', target.id);
3. }
5. function dropIt(target, e) {
6.     var id = e.dataTransfer.getData('SpanImg');
7.     target.appendChild(document.getElementById(id));
8.     e.preventDefault();
9. }

I used table elements to provide both layout structure and as a target for ondrop events:

1. <td align="center" width="100" id="blue" ondrop="dropIt(this, event)" ondragenter="return false" ondragover="return false">   ....  </td>

I chose the span element (wrapping an image) as my draggable object:

1. <span draggable="true" id="t_1" ondragstart="dragIt(this, event)"><img src="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/tower.jpg"></span>

Original post: https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/html5_an_example_of_drag_and_drop26?lang=en
Download exapme: https://www.ibm.com/developerworks/mydeveloperworks/files/app?lang=en#/person/270000CN12/file/ca25c6eb-f34a-437c-85da-5b3b24b3b9bb