Javascriptでドラッグドロップを実装する

クライアントアプリではもはやおなじみのドラッグドロップ。Webアプリに使用するためにはJQuery等のライブラリを利用する必要がある。しかしHTML5に"Drag and Drop API"が実装されたことで標準の機能のみで実装できるようになりました。


ドラッグドロップでhtml要素を移動する

大きな手順として、①ドラッグする側の要素にドラッグ可能の属性を指定する②ドロップされる側にドラッグ中とドロップされた時のイベントを実装③ドラッグする側にドラッグ開始の処理を実装するといった流れです。.netでクライアントアプリの開発経験がある方ならお馴染みの流れでしょう。

とりあえずサンプルコードです

サンプル

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
    var ds;
    var dsbgcol;
    function init() {
      var citem = document.getElementById("dragContainer");
      citem.addEventListener("drop", itemDrop, false);
      citem.addEventListener("dragover", DragOver , false);

      var ditem = document.getElementById("dragItem");
      ditem.addEventListener("dragstart",DragStart,false);
    }

    function DragStart() {
      event.dataTransfer.setData("text", event.target.id);
    }
    function itemDrop() {
      var text = event.dataTransfer.getData("text");
      var target = document.getElementById(text);
      event.currentTarget.appendChild(target);
      event.preventDefault();
    }
    function DragOver() {
      event.preventDefault();
    }
  </script>
  <style type="text/css">
    div {
      width: 240px;
      height: 240px;
      border: 1px solid #909090;
    }
  </style>
</head>
<body onload="init()">

  <div id="dragItem" draggable="true" ondragstart="DragStart(event);">
    このアイテムをドラッグする
  </div>

  <div id="dragContainer">
    このアイテムへドラッグする
  </div>

</body>
</html>

ドラッグ可能の属性はdraggableにて指定できます。

draggable属性の種類

属性

備考

属性

draggable="true"

備考

ドラッグを実施する

属性

draggable="false"

備考

ドラッグを実施しない

属性

draggable=""

備考

デフォルトの動作を実施する

(imgとa要素のみだっとと思う)

次にhtml要素にドラッグとドロップ時のイベントを実装します。on~と言ったイベントが用意されているので、必要に応じて実装してください。ドラッグとドロップのイベントは以下の通りです。

ドラッグのイベントの種類

イベント名

備考

イベント名

dragstart

備考

ドラッグを開始した時

イベント名

drag

備考

ドラッグ中

イベント名

dragend

備考

ドラッグを終了させたとき

ドロップのイベントの種類

イベント名

備考

イベント名

dragenter

備考

ドラッグ中にドロップ可能な要素に入ったとき

イベント名

dragover

備考

ドラッグ中にドロップ可能な要素に入っているとき

イベント名

dragleave

備考

ドラッグ中にドロップ可能な要素から出たとき

イベント名

drop

備考

ドロップされたとき

後はドラッグドロップのイベントを実装していくだけなのだが、ポイントとなるのはDataTransferオブジェクト。このオブジェクトにデータを出し入れすることでドラッグドロップを実現する。DataTransferオブジェクトのプロパティおよびメゾットは以下の通りです。

プロパティおよびメゾット

名称

備考

名称

setData(key, value)

備考

受け渡しに使用するデータをキーに対して値で設定する。キーは"text"か"url"のみ使用可能

名称

getData(key)

備考

setDataで設定した値を取得する

名称

clearData()

備考

setDataで設定した値をクリアする

名称

setDragImage(image, x, y)

備考

ドラッグ中のアイコン画像を設定できる。xとy軸で表示位置も設定可能。使用したことがないので不明。。。

名称

addElement(element)

備考

ドラッグしているhtml要素を設定する

名称

types

備考

setDataで設定した値のデータ形式を設定・取得する

名称

files

備考

閲覧しているユーザが自身の端末にあるファイルをブラウザ内にドラッグした時にデータを参照

名称

dropEffect

備考

ドラッグ中のアイコンにドロップ結果の種類を設定。copy/link/moveが設定可能

名称

effectAllowed

備考

ドロップ処理を受け付ける種類を設定。none(処理しない)/link(リンクのみ可)/all(全て可)が設定が可能

DragOverイベント内での処理は、dragoverイベント時にはもともとドロップを受け付けないため、"preventDefault"を呼び出し標準の処理をキャンセルしている。

Dropイベント内での処理は、ドロップイベントの無限ループを防ぐために、"preventDefault"を呼び出し標準の処理をキャンセルしている。