html5でドラッグアンドドロップAPIを練習して、リストドラッグアンドドロップの動きを実現してください！参照記事：JS HTML5ドラッグアンドドロップアップロード画像プレビュー
HTML5の実装ドラッグアンドドロップモバイルリスト：
1.各子供のドラッグ可能な属性を設定し、ドラッグマークを設定するループ（1人またはすべての子供が移動することはありません）
2。配達エリアに入るたびに、検出中にドラッグアンドドロップマークがあり、ある場合はDOM要素を追加します。
別の実装のアイデアは、ドラッグアンドドロップでDataTatransferオブジェクトをプロパティとして使用し、setData（）およびgetData（）メソッドを使用して、ドラッグされた各子供のIDを渡し、指定された子供が実験するために移動することを検討できます。 。 。
HTML：
// empty list <div id = "box"> </div> //コンテンツリスト<ul id = "con"> <li>アイテム1 </li> <li>アイテム2 </li> <li>アイテム3 </li> <li>アイテム4 </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; //各子供のドラッグ可能なプロパティを設定し、（; 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; }; } // trender event $（ "box"）。ondragenter = function（e）{e.preventdefault（）; console.log（ 'entry'）; }; $（ "box"）。ondragover = function（e）{e.preventdefault（）; console.log（ 'move'）; }; $（ "box"）。ondragleave = function（e）{e.preventdefault（）; console.log（ 'leave'）; }; $（ "box"）。ondragleave = function（e）{e.preventdefault（）; for（var i = 0; i <lidoms.length; i += 1）{if（lidoms [i] .flag）{box.appendChild（lidoms [i]）; }} console.log（ 'success'）; }; //トラウトエリアイベント$（ "con"）。ondrager = function（e）{e.preventdefault（）; console.log（ 'enter'）; }; $（ "con"）。ondragover = function（e）{e.preventdefault（）; console.log（ 'move'）; }; $（ "con"）。ondragover = 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）{// $（ "con"）。appendChild（lidoms [i]）; }} console.log（ 'success'）; }; </script>複製画像：
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。