2023/12-2024/01/08

JavaScript: draggable 属性でドラッグ操作する

概略

HTML の draggable 属性 を使うと HTML 要素 (タグ) をドラッグ操作で移動できるようになります。 JavaScript と組み合わせて HTML 要素を別の場所に移動したり並べ替えたりすることができます。

draggable 属性を使うとマウスイベントを使った処理よりも JavaScript の記述が簡単になります。
マウスイベントの処理

ドラッグ移動したい HTML 要素に draggable="true" を付けます。

// 例: img 要素に draggable 属性を付ける
<img draggable="true" src="sample.jpg"/>

ドロップ先の HTML 要素にドロップイベントの処理を付けます。

// 例: ドロップ先が div の場合
div.addEventListener("drop", event => ドロップの処理 );

主に使うイベントは dragstart, dragover, drop などです。また dragend, dragenter, dragleave などのイベントがあります。

こちらは ul li のリストで並べた項目を入れ替えたり、 table の列や行を入れ替えたりする話です。親要素に対して子要素の並び順をドラッグ操作で変更します。

TestJS_shogi_piece_drag02.html (2023/12)
将棋の駒をドラッグ操作で移動する。 table td 内の駒の img タグを別の td 内に移動させます。
HTML で将棋盤やチェスボードを表現する

こちらは img 画像や svg 画像を親の要素に対して絶対座標で配置し、ドラッグ操作で配置座標を変更する話です。

TestJS_draggable_img01.html (2024/01)
img 画像をドラッグ操作で移動する。
img タグ: JavaScript (1)

TestJS_draggable_div01.html
div タグをドラッグ移動する。処理は img タグと同じです。 HTML の img タグが div タグに変わっただけです。
ドラッグ移動を許可するとテキスト選択ができなくなる点に注意。
div タグ: JavaScript (1)

TestJS_draggable_dl02.html
dl タグをドラッグ操作で移動する。タイトル領域の dt タグでドラッグ操作します。 dd タグはドラッグには反応しない通常のタグです。
HTML: dl, dt, dd タグ

TestJS_draggable_svg02.html (2024/01)
SVG 画像をドラッグ移動する。外部の svg ファイルではなくて HTML 内にある svg タグの図形をドラッグ操作します。
svg タグ: JavaScript: ドラッグ操作