HTML5 Drag and drop replication function _ related skills

Drag-and-drop is a common feature that crawls objects and then drags them to another location. In HTML5, drag is part of the standard, and any element can be dragged and pulled. HTML5 Drag a very common function, but most of the drag-and-drop case is a cut process, the project needs to achieve HTML5 drag and drop replication function, HTML5 drag and drop replication is very simple, just in the ordinary Html5 drag and drop the process to do a little change can.

PS: This blog post is not the first article, just simple notes.

Browser support

1. Internet Explorer 9
2. Firefox
3. Opera 12
4. Chrome
5. Safari 5

V1.0 Code Section

<!
      DOCTYPE html>  

Code resolution

The idea is to clone the dragged element and then appendchild the cloned Element () to the specified location

Implement HTML5 drag and drop copy core code. CloneNode ()

HTML5 drag and drop after the replication, in fact, there are many things can be done after appendchild () implementation, this look at specific needs

If you just want to implement the traditional HTML5 drag-and-drop, remove the var item = document.getElementById (data). CloneNode ();, then ev.target.appendChild ( data); Can

Through this article, I hope to help everyone, thank you for your support to this site!