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

HTMLで驚くほど簡単なドラッグ&ドロップ! HTML
この記事は約7分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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:注意点と対処法

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

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

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

    対処法として、ドラッグ&ドロップ機能がサポートされていない場合には、代替手段を提供することが考えられます。

  2. ドラッグ&ドロップ時の要素の見た目を変更したい場合、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>

まとめ

この記事では、HTMLでドラッグ&ドロップ機能を実装する方法を初心者目線で詳しく解説しました。

5つのステップを踏むことで、簡単にドラッグ&ドロップ機能を実現できます。

また、注意点やカスタマイズの方法、応用例も紹介しましたので、ぜひ参考にしてください。

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