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
- Internet Explorer 9
- Firefox
- Opera 12
- Chrome
- Safari 5
V1.0 Code Section
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!