画像を「ドラッグアンドドロップで移動」させたい時に使える方法です。マウスクリックした時とドラッグした時、離されたときにイベントを発生させて画像を移動させる処理をJavaScriptで作ってみます。
▶サンプルページはこちら
DataTransfer.setData()
DataTransfer.setData()を使うことで、画像のドラッグアンドドロップを使うことができるようになる…ようです。
DataTransfer.setData() メソッドは、ドラッグ操作の drag data に指定したデータと型を設定します。与えられた型のデータが存在しない場合、このデータはドラッグデータストアの末尾に加えられ、このような types リストの最後のアイテムは新しい型になります。
https://developer.mozilla.org/ja/docs/Web/API/DataTransfer/setData
▶サンプルページはこちら
<script>
function dragstart(event){
event.dataTransfer.setData("text", event.target.id);
}Event.preventDefault()
Event インターフェースの preventDefault() メソッドは、ユーザーエージェントに、イベントが明示的に処理されない場合にその既定のアクションを通常どおりに行うべきではないことを伝えます。
https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault
function dragover(event){
event.preventDefault();
}DataTransfer.getData()
DataTransfer.getData() メソッドは、指定した型のドラッグデータを (DOMString として) 受け取ります。ドラッグ操作がデータを含まない場合、このメソッドは空文字列を返します。
https://developer.mozilla.org/ja/docs/Web/API/DataTransfer/getData
Node.appendChild
[rml_read_more]
Node.appendChild() メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild
<script>
function droppoint(event){
const id_name = event.dataTransfer.getData("text");
const drag_elm =document.getElementById(id_name);
event.currentTarget.appendChild(drag_elm);
event.preventDefault();
}
</script>HTMLのondragover=”イベントハンドラ”>で呼び出す
ondragover=”イベントハンドラ”で、ドラッグ操作を始めた時に実行するイベントを指定できるようです。
<div id="drag" ondragover="dragover(event)" ondrop="droppoint(event)">GlobalEventHandlers.ondrop ドロップした時にコールバック関数を実行する
GlobalEventHandlers.ondropで、画像がドロップされた際にコールバック関数を呼び出します。
<div id="drag" ondragover="dragover(event)" ondrop="droppoint(event)">ondragstartイベントでドラッグ操作を始めた際に関数を呼び出す
ondragstartイベントでドラッグ操作を始めた際に関数を呼び出すことができます。画像をドラッグ操作を始めた際に「dragstart(event)」を呼び出しています。
<h2>drag</h2>
<div id="drag" ondragover="dragover(event)" ondrop="droppoint(event)">
<img class="img001" src="https://css.eguweb.tech/wp-content/uploads/usagi_holland_lop_lopear.png" id="icon01" alt="" draggable="true" ondragstart="dragstart(event)">
<img class="img001" src="https://css.eguweb.tech/wp-content/uploads/animal_chara_smartphone_penguin.png" id="icon02" alt="" draggable="true" ondragstart="dragstart(event)">
<img class="img001" src="https://css.eguweb.tech/wp-content/uploads/animal_stand_saru.png" id="icon03" alt="" draggable="true" ondragstart="dragstart(event)">
<img class="img001" src="https://css.eguweb.tech/wp-content/uploads/animal_penguin_kid.png" id="icon04" alt="" draggable="true" ondragstart="dragstart(event)">
<img class="img001" src="https://css.eguweb.tech/wp-content/uploads/animal_usaghi_netherland_dwarf.png" id="icon05" alt="" draggable="true" ondragstart="dragstart(event)">
<img class="img001" src="https://css.eguweb.tech/wp-content/uploads/animal_dolphin.png" id="icon06" alt="" draggable="true" ondragstart="drag_start(event)">
</div>
<h2>drop</h2>
<div id="drop" ondragover="drag_over(event)" ondrop="droppoint(event)">
</div>画像の並び替えができました！！
まとめ
JavaScriptで画像のドラッグアンドドロップは難しいのかな…と思っていたら、思ったよりも簡単に出来ました。
簡単に作れますので、興味がありましたらぜひお試しください😃
ご参考ください😃
▶サンプルページはこちら
