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

2019/08/15 (更新日：2020/06/26)

先日、「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>