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>複製画像:
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。