JavaScriptでドラッグ&ドロップによる画像の入れ替えを実装する

先日、「JavaScriptで画像を連続表示してコマ撮りムービー風の表示をしてみる」で13枚の画像を並べた際、ふと、これをドラッグ&ドロップで並べ替えできたら便利かなと感じたため、さっそく作ってみました。

……と言いつつ、並び替えはちょっと面倒そうだったので、ひとまずドラッグ&ドロップによる画像入れ替え操作です。

また、スマホで見ている人にとっては何のこっちゃ、な話になります。あくまでマウスによるドラッグ&ドロップ操作ですので。

HTMLの例

<img src="[画像ファイル01]" id="img01" draggable="true" ondragstart="dragstart();" ondragover="dragover();" ondrop="drop(this);" />
<img src="[画像ファイル02]" id="img02" draggable="true" ondragstart="dragstart();" ondragover="dragover();" ondrop="drop(this);" />
<img src="[画像ファイル03]" id="img03" draggable="true" ondragstart="dragstart();" ondragover="dragover();" ondrop="drop(this);" />
<img src="[画像ファイル04]" id="img04" draggable="true" ondragstart="dragstart();" ondragover="dragover();" ondrop="drop(this);" />
<img src="[画像ファイル05]" id="img05" draggable="true" ondragstart="dragstart();" ondragover="dragover();" ondrop="drop(this);" />
<img src="[画像ファイル06]" id="img06" draggable="true" ondragstart="dragstart();" ondragover="dragover();" ondrop="drop(this);" />
<img src="[画像ファイル07]" id="img07" draggable="true" ondragstart="dragstart();" ondragover="dragover();" ondrop="drop(this);" />
<img src="[画像ファイル08]" id="img08" draggable="true" ondragstart="dragstart();" ondragover="dragover();" ondrop="drop(this);" />
<img src="[画像ファイル09]" id="img09" draggable="true" ondragstart="dragstart();" ondragover="dragover();" ondrop="drop(this);" />
<img src="[画像ファイル10]" id="img10" draggable="true" ondragstart="dragstart();" ondragover="dragover();" ondrop="drop(this);" />
<img src="[画像ファイル11]" id="img11" draggable="true" ondragstart="dragstart();" ondragover="dragover();" ondrop="drop(this);" />
<img src="[画像ファイル12]" id="img12" draggable="true" ondragstart="dragstart();" ondragover="dragover();" ondrop="drop(this);" />
<img src="[画像ファイル13]" id="img13" draggable="true" ondragstart="dragstart();" ondragover="dragover();" ondrop="drop(this);" />

解説

ひたすら画像を並べているだけです。13枚という枚数に特に意味はないため、2枚以上の好きな画像を並べればOKです。

ポイントとしてはidを割り振ることと、draggable属性をtrueにすること。

あとはJavaScript用にondragstart/ondragover/ondropを追加する必要があります。

HTMLが長くなって見づらいと感じるならこのイベント部分についてはJavaScript側で追加するのも良いでしょう。

JavaScriptの例

<script>
function dragstart()
{
	//ドラッグ元のIDを保存
	event.dataTransfer.setData("text/plain", event.target.id);
}
function dragover()
{
	event.preventDefault();
}
function drop(obj)
{
	event.preventDefault();
	//ドラッグしている画像のIDを取得
	var id = event.dataTransfer.getData("text/plain");
	//ドロップ先のsrcを保存
	var buff = obj.src;
	//ドロップ先のsrcにドラッグ元のsrcを上書き
	obj.src = document.getElementById(id).src;
	//保存していたsrcをドラッグ元のsrcへ上書き
	document.getElementById(id).src = buff;
}
</script>

解説

大事な部分はJavaScriptのコメントに書きましたが、

  • 画像をマウスで掴んだ際(ドラッグ開始)、その画像のIDを一時的に保管
  • 画像を離した際(ドロッ始)、保存していたIDからドラッグ元の画像を特定し、ドロップ先の画像のsrcと入れ替える

という単純な仕組みです。

これが並べ替え処理だとドラッグで抜けた部分以降を詰める処理と、ドロップ先以降を後ろにずらす処理が入って面倒そうだと思ったので、入れ替え処理にしました。

もしかしたらHTML要素の操作だけでいけるかも知れませんが、そのあたりはあまり詳しくないので、また機会があれば。

実行結果

任意の画像をドラッグして、別の画像の上へドロップすると、その2つの画像が入れ替わるとハズです。

今回はChromeだけではなく、FireFoxやEdgeでも動作確認済みです。

昔ながらのHPだと、画像の並べ替えといえば矢印アイコンをクリックして順番に、みたいなのが多かったと思いますが、ドラッグ&ドロップで画像の並び替えができると直感的でわかりやすいですよね。

まぁ今回は手抜きして並び替えではなく、入れ替えなわけですが、これだけでもけっこう便利だし、なによりコードの量が少ない(関数名入れてもわずか16行!)のが良いと思っています(自画自賛)。

コマ撮りムービーの順番を入れ替えたくなったときに便利かなと思って作り始めたわけですが、ショップシステム用の管理ページで商品写真の並び順を変えたり、パズルゲームみたいなモノを作ったり、応用範囲は意外と広そうな気がします。

2020年6月追記

↓こちらの記事のほうがブラッシュアップされておりますので、良ければどうぞ。
JavaScriptでドラッグ&ドロップによるリストの並び替えを実装する例

adsbygoogle

フォロー