ドラッグ&ドロップで項目の入れ替え可能なリストを作成する - JavaScript

ドラッグ&ドロップで項目の入れ替え可能なリストを作成するコードを紹介します。

概要

HTML5のドラッグ&ドロップ機能を利用して、項目の入れ替えができるリストを作成します。

例

コード

下記のHTML,CSSファイルを作成します。

ListDragDropSort.css

body, html {
    background-color: #F0F0F0;
    font-family: sans-serif;
    text-align: center;
}

ul {
    margin: auto;
    width: 40%;
    text-align: center;
}

li {
    list-style-type: none;
    padding: 5px;
    margin: 2px;
    background-color: #dff8ff;
    border: 2px solid #00a7d5;
}

ListDragDropSort.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="ListDragDropSort.css"/>

  <script type="text/javascript">
    var source;

    function dragStarted(evt) {
      source = evt.target;
      evt.dataTransfer.setData("text/plain", evt.target.innerHTML);
      evt.dataTransfer.effectAllowed = "move";
    }

    function draggingOver(evt) {
      evt.preventDefault();
      evt.dataTransfer.dropEffect = "move";
    }

    function dropped(evt) {
      evt.preventDefault();
      evt.stopPropagation();
      source.innerHTML = evt.target.innerHTML;
      evt.target.innerHTML = evt.dataTransfer.getData("text/plain");
    }
  </script>
</head>
<body>
  <ul>
    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">ぺんぎんクッキー</li>
    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">あひるサブレ</li>
    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">らくだキャラメル</li>
    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">ふくろうケーキ</li>
    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">しろくまアイス</li>
  </ul>
</body>
</html>

解説

リストのアイテムliタグにドラッグができるよう draggable 属性に true を設定します。また、ドラッグを開始時のイベントにdragStarted() 関数を、ドラッグ中のイベントにdraggingOver() 関数を、ドロップ時のイベントにdropped() 関数を設定します。

<li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">ぺんぎんクッキー</li>

ドラッグ開始時に下記のdragStarted 関数が呼び出されます。ドラッグしたオブジェクトをsource変数に格納します。また、dataTransferオブジェクトに値を設定してドラッグを開始します。

function dragStarted(evt) {
  source = evt.target;
  evt.dataTransfer.setData("text/plain", evt.target.innerHTML);
  evt.dataTransfer.effectAllowed = "move";
}

ドラッグ中は下記のコードが実行されます。preventDefault メソッドによりデフォルトの動作を無効にします。また、dataTransfer.dropEffectをmoveに設定することでドロップが可能な状態に設定します。

function draggingOver(evt) {
  evt.preventDefault();
  evt.dataTransfer.dropEffect = "move";
}

ドロップすると下記のdropped関数が呼び出されます。preventDefault メソッドによりデフォルトの動作を無効にします。stopPropagationにより、親要素の処理も無効にします。ドロップされた要素のinnerHTMLをドロップ先のinnterHTMLに代入します。また、ドロップ先のinnerHTMLにドロップされた要素のデータを設定します。この処理により、ドラッグ&ドロップされた項目とドロップ先の項目との値を入れ替える処理になります。

function dropped(evt) {
  evt.preventDefault();
  evt.stopPropagation();
  source.innerHTML = evt.target.innerHTML;
  evt.target.innerHTML = evt.dataTransfer.getData("text/plain");
}