HTML・CSS・JavaScriptで実装！複数アイテム対応のドラッグ＆ドロップ機能の作り方

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

ドラッグ＆ドロップ機能って、ちょっと難しそうに見えませんか？
でも実は、HTML・CSS・JavaScriptを使えば、基本的なものなら意外と簡単に作れます。

この記事では、マウスで要素をドラッグし、指定の位置にドロップできる仕組みを実装する方法を丁寧に解説します。

「ToDoリストをドラッグで並び替えたい」「画像やパーツを好きな位置に移動させたい」そんなUIを作りたい方はぜひ参考にしてください。

ドラッグ＆ドロップって何？どんな場面で使うの？

「ドラッグ＆ドロップ」とは、マウスで要素を掴んで、別の場所に移動させるUI操作のことです。
例えば以下のような場面で活用されています。

視覚的にも直感的にも分かりやすいUIとして、ユーザー体験向上に一役買っています。

基本の実装：HTMLとCSSで見た目を作ろう

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

1. HTMLの構造を作成

まずは、ドラッグ対象とドロップ先の要素を用意します。draggable="true" 属性を指定することで、ドラッグが可能になります。

ここをドラッグ
 
ここにドロップ

2. CSSで装飾

最低限のスタイルで見やすく整えましょう。

.draggable {
  width: 150px;
  padding: 10px;
  background-color: #4fc3f7;
  color: white;
  cursor: grab;
  margin-bottom: 20px;
}
.dropzone {
  width: 200px;
  height: 150px;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScriptでドラッグ動作を追加する

3. イベントを使って動きをつける

JavaScriptでは、dragstart, dragover, drop イベントを使って動きを実装します。

const dragItem = document.getElementById("drag1");
const dropZone = document.getElementById("dropzone");
dragItem.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text", e.target.id);
});
dropZone.addEventListener("dragover", (e) => {
  e.preventDefault();
});
dropZone.addEventListener("drop", (e) => {
  e.preventDefault();
  const data = e.dataTransfer.getData("text");
  const draggedElement = document.getElementById(data);
  dropZone.appendChild(draggedElement);
});

応用テクニック：複数アイテム対応やスタイルの切り替え

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

複数のアイテムをドラッグしたい場合は、クラスを共通化し、イベントをループで設定します。

また、ドラッグ中にCSSクラスを切り替えると、ユーザーに操作中だと視覚的に伝えられます。

注意点・ブラウザ対応について

まとめ

ぜひ、あなたのWebサイトやアプリに応用してみてください！

satokotadesignキャンペーン実施中！