JS HTML5 Implementation Drag and drop mobile list effect _javascript skills

Practice the drag-and-drop API in HTML5, implement the list drag and drop Move! Reference article: JS HTML5 drag and drop upload picture preview

HTML5 drag and drop move list to realize the idea:
1. Loop to set the Draggable property of each subkey, and set the drag tag (not multiple or all of the subkeys are moved)
2. Every time you enter the drop zone, there is a drag-and-drop mark on the test, a DOM element is added, etc.

another way to realize this is that you can use the DataTransfer object in drag-and-drop as a property, use the SetData () and GetData () methods to pass data such as the ID of each dragged subkey, and find the specified subkey to move .... To be tested ...

Html:

Empty list
<div id= "box" ></div>/
/Content list
<ul id= "Con" >
 <li> 1th </li>
 <li> 2nd </li>
 <li> 3rd </li>
 <li> 4th item </li>
</ul>

Js:

 <script> function $ (ID) {return document.getElementById (ID);
 var con = $ ("con");
 var box = $ ("box");
 var lidoms = document.getelementsbytagname ("Li");
 var i = 0, len = lidoms.length;
 Loop to set the Draggable property of each subkey, and then drag the tag for (; i < len; i + 1) {lidoms[i].draggable = ' true ';
 Lidoms[i].flag = false;
 Lidoms[i].ondragstart = function () {This.flag = true;
 };
 Lidoms[i].ondragend = function () {This.flag = false;
 };
 //Drop Event $ ("box"). OnDragEnter = function (e) {e.preventdefault ();

 Console.log (' enter ');
 };
 $ ("box"). OnDragOver = function (e) {e.preventdefault ();
 Console.log (' move ');
 };
 $ ("box"). OnDragLeave = function (e) {e.preventdefault ();
 Console.log (' leave ');
 };
 $ ("box"). OnDrop = function (e) {e.preventdefault ();
 for (var i = 0; i < lidoms.length i + 1) {if (Lidoms[i].flag) {box.appendchild (lidoms[i]);

 } console.log (' success ');
 };
 Drop Event $ ("Con"). OnDragEnter = function (e) {e.preventdefault ();

 Console.log (' enter ');
 }; $ ("con"). OndrAgover = function (e) {e.preventdefault ();
 Console.log (' move ');
 };
 $ ("con"). OnDragLeave = function (e) {e.preventdefault ();
 Console.log (' leave ');
 };
 $ ("con"). OnDrop = function (e) {e.preventdefault (); for (var i = 0; i < lidoms.length i = 1) {if (Lidoms[i].flag) {//is acquired at this time box object under Li, not the original container of Li $ ("con"). AppendChild (
 Lidoms[i]);

 } console.log (' success ');
 };

 </script>

Effect Chart:

The above is the entire content of this article, I hope to help you learn.