HTML5のdraggable属性とjavascriptを使用して自由にドラッグドロップできるようにしました。
下のコードを完コピしてもらえれば確認していただけると思いますが、
左側にドラッグ対象の要素(numberBox)が縦に20個並んでいるボックス(drop_back_box)があり、
右側には横長のボックス(dropBox)が縦に5個並んでいます。
numberBoxをdropBoxやdrop_back_boxにドラッグ・ドロップするのは簡単にできたのですが、
dropBoxに複数ドロップされたnumberBox間で左右にドラッグドロップできるようにするのに
かなり手こずってしまいました。
ドロップされたnumberBox間で左右にドラッグドロップするためにはnumberBox自体に
ondrop属性を持たせてjavascriptのinsertBeforeを使用することで簡単にできました。。。
こんな簡単なことをなぜすぐに気づかなかったのか。。。
HTML5のdraggable属性はドラッグした要素やドロップ先の要素の情報を取得できるのでかなり便利です。
コードは下記の通りです！
<style>.left_box{width:110px;height:700px;background:#fff;margin-right:56px;}.drag_box{width:100px;height:30px;background:red;margin:2px;}.right_box{background:#fff;height:700px;width:110px;}.drop_box{width:800px;height:38px;margin:2px;background:yellow;display:flex;}</style><!-- 左のボックス --><divstyle="display:flex;"><divclass="left_box"><divclass="drop_back_box"ondragover="dragover(event)"ondrop="dropBack(event)"><?phpfor($i=1;$i<21;$i++):?><divclass="drag_box"id="numberBox<?phpecho$i;?>"draggable="true"ondragstart="f_dragstart(event)"ondrop="dropLR(event)">ナンバー：<?phpecho$i;?></div><?phpendfor;?></div></div><!-- 右のボックス --><divclass="right_box"><?php$i=1;for($i=1;$i<6;$i++):?><divid="dropBox<?phpecho$i;?>"class="drop_box"ondragover="dragover(event)"ondrop="drop(event)"></div><?phpendfor;?></div></div><script>/***** ドラッグ開始時の処理 *****/functionf_dragstart(event){//ドラッグするデータのid名をDataTransferオブジェクトにセットevent.dataTransfer.effectAllowed='move';event.dataTransfer.setData("text",event.target.id);}/***** ドラッグ要素がドロップ要素に重なっている間の処理 *****/functiondragover(event){event.dataTransfer.effectAllowed='move';//dragoverイベントをキャンセルして、ドロップ先の要素がドロップを受け付けるようにするevent.preventDefault();}/***** 右のボックスにドロップ時の処理 *****/functiondrop(event){// ドラッグされたデータのid名をDataTransferオブジェクトから取得constboxId=event.dataTransfer.getData("text");constnumberBox=document.getElementById(boxId);constdropBox=event.currentTarget;dropBox.appendChild(numberBox);// エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておくevent.preventDefault();};functiondropLR(event){// ドラッグされたデータのid名をDataTransferオブジェクトから取得constdraggedEleId=event.dataTransfer.getData("text");// ドラッグされた要素を取得constdraggedElement=document.getElementById(draggedEleId);// ドロップされた要素を取得constdropedElement=event.currentTarget;// ①ドロップ先の親要素のid名を取得constdropedParentId=event.currentTarget.parentNode.id;constdropBox=document.getElementById(dropedParentId);// 左のボックスに戻す時以外は要素間の左右にドロップできる処理dropBox.insertBefore(draggedElement,dropedElement)// エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておくevent.preventDefault();event.stopPropagation();};// 左のボックスにドロップする処理functiondropBack(event){// エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておくevent.preventDefault();}</script>
まだまだ自分の応用力のなさを痛感してばかりですが、これからもプログラミング頑張ろうと思います！