HTMLで驚くほど簡単なドラッグ＆ドロップ！5つのステップと実例

はじめに
ドラッグ＆ドロップとは
まとめ

はじめに

この記事を読めば、HTMLでドラッグ＆ドロップ機能を実装できるようになります。

あなたはウェブサイトやアプリで、ユーザーに直感的な操作を提供することができるようになるでしょう。

では、さっそく始めていきましょう！

ドラッグ＆ドロップとは

ドラッグ＆ドロップは、マウスやタッチ操作で要素を選択し、別の場所に移動させることができる機能です。

ウェブページやアプリで、ファイルのアップロードや項目の並べ替えなどに利用されています。

ステップ1：HTML要素の準備

まず、ドラッグ＆ドロップを実装するために、HTML要素を準備します。

次のようなコードを記述してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ドラッグ＆ドロップサンプル</title>
</head>
<body>
  <div id="draggable" draggable="true">ドラッグできる要素</div>
  <div id="droppable">ここにドロップできます</div>
</body>
</html>

ステップ2：CSSでスタイル設定

次に、ドラッグ＆ドロップ機能を見やすくするために、CSSでスタイルを設定しましょう。

次のようなコードを<head>タグ内に追加してください。

<style>
  #draggable {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    cursor: grab;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #droppable {
    width: 200px;
    height: 200px;
    background-color: lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

ステップ3：JavaScriptでドラッグ＆ドロップ機能実装

続いて、JavaScriptを使用してドラッグ＆ドロップ機能を実装します。

下記のようなコードを</body>タグの直前に追加してください。

<script>
  const draggable = document.getElementById('draggable');
  const droppable = document.getElementById('droppable');

  draggable.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('text/plain', event.target.id);
  });

  droppable.addEventListener('dragover', (event) => {
    event.preventDefault();
  });

  droppable.addEventListener('drop', (event) => {
    event.preventDefault();
    const id = event.dataTransfer.getData('text/plain');
    const element = document.getElementById(id);
    droppable.appendChild(element);
  });
</script>

ステップ4：注意点と対処法

ドラッグ＆ドロップ機能を実装する際には、いくつかの注意点があります。

下記に主な注意点とその対処法を示します。

ドラッグ＆ドロップ機能は、すべてのブラウザでサポートされているわけではありません。

対処法として、ドラッグ＆ドロップ機能がサポートされていない場合には、代替手段を提供することが考えられます。
ドラッグ＆ドロップ時の要素の見た目を変更したい場合、CSSの:activeや:hoverなどの疑似クラスを利用することができます。

ステップ5：カスタマイズと応用例

ドラッグ＆ドロップ機能は、様々なカスタマイズが可能です。

下記に応用例とサンプルコードを示します。

応用例1：複数の要素をドラッグ＆ドロップ可能にする

<div id="draggable1" draggable="true" class="draggable">ドラッグできる要素1</div>
<div id="draggable2" draggable="true" class="draggable">ドラッグできる要素2</div>
<div id="droppable">ここにドロップできます</div>

<script>
  const draggables = document.querySelectorAll('.draggable');
  const droppable = document.getElementById('droppable');

  draggables.forEach((draggable) => {
    draggable.addEventListener('dragstart', (event) => {
      event.dataTransfer.setData('text/plain', event.target.id);
    });
  });

  droppable.addEventListener('dragover', (event) => {
    event.preventDefault();
  });

  droppable.addEventListener('drop', (event) => {
    event.preventDefault();
    const id = event.dataTransfer.getData('text/plain');
    const element = document.getElementById(id);
    droppable.appendChild(element);
  });
</script>

応用例2：ドロップ領域が複数ある場合

下記のように、ドロップ領域が複数ある場合の対応も可能です。

<div id="draggable" draggable="true">ドラッグできる要素</div>
<div id="droppable1" class="droppable">ここにドロップできます1</div>
<div id="droppable2" class="droppable">ここにドロップできます2</div>

<script>
  const draggable = document.getElementById('draggable');
  const droppables = document.querySelectorAll('.droppable');

  draggable.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('text/plain', event.target.id);
  });

  droppables.forEach((droppable) => {
    droppable.addEventListener('dragover', (event) => {
      event.preventDefault();
    });

    droppable.addEventListener('drop', (event) => {
      event.preventDefault();
      const id = event.dataTransfer.getData('text/plain');
      const element = document.getElementById(id);
      droppable.appendChild(element);
    });
  });
</script>