デスクトップアプリライクな操作性を実現するドラッグ＆ドロップAPI

連載 :

2013年3月1日(金)

TIPS 064：ドラッグ＆ドロップで許可される動作を指定する

effectAllowed／dropEffectプロパティを指定することで、ドラッグ＆ドロップ時に想定される動作を明示的に指定できます。これらのプロパティを指定しておくことで、ドラッグ＆ドロップ時の動作を制限できるだけでなく、動作に応じてマウスポインタが変化し、視覚的にも現在の操作内容が明確になります。

［リスト06］ドラッグ＆ドロップで許可される操作を指定（effect.html）

  <script>
  window.addEventListener('DOMContentLoaded', function() {
    // ドラッグ／ドロップ対象の要素を取得
    var drag = document.querySelector('#drag');
    var drop = document.querySelector('#drop');
 
    // ドラッグ開始時の処理を定義
    drag.addEventListener('dragstart', function(e) {
      // 現在の要素にコピーを許可
      e.dataTransfer.effectAllowed = 'copy';
      e.dataTransfer.setData('text', e.target.id);
    }, true);
 
    // ドラッグ中の処理を定義
    drop.addEventListener('dragover', function(e) {
      e.preventDefault();
      // ドロップ領域でコピーを許可
      e.dataTransfer.dropEffect = 'copy';
    }, true);
  
    // ドロップ時の処理を定義
    drop.addEventListener('drop', function(e) {
      var id = e.dataTransfer.getData('text');
      e.currentTarget.appendChild(document.getElementById(id));
      e.preventDefault();
    }, true);
  });
  </script>

図6：ドラッグ操作に応じてコピーアイコンを表示（クリックで拡大）
※本サンプルは、IEでは動作しません

まず、effectAllowedプロパティは、ドラッグ元要素で許可される動作を指定します。dragstartイベントリスナーで指定します（1）。以下に、指定できる主な値をまとめておきます。

表5：effectAllowedプロパティの設定値

設定値	概要
none	すべてのドロップ操作を禁止
copy	データをコピー
link	データをリンク
move	データを移動
copyLink	データをコピー、またはリンク
copyMove	データをコピー、または移動
linkMove	データをリンク、または移動
all	すべての操作を許可

そして、effectAllowedプロパティとセットで指定するのがdropEffectedプロパティです（2）。こちらはドロップ先の要素で許可する動作を指定します。以下は、主な設定値です。

表6：dropEeffectプロパティの設定値

設定値	概要
none	すべてのドロップ操作を禁止
copy	データをコピー
link	データをリンク
move	データを移動

dropEffectプロパティには、effectAllowedプロパティで指定した動作に対応する値を指定します。effectAllowed／dropEffectプロパティの値に応じて、マウスポインタも適した形状に変化する点に注目してください。

なお、dropEffectプロパティの値が、effectAllowedプロパティで許可した動作のいずれにも合致しない場合、マウスアイコンもドロップ禁止を表すものとなり、ドロップ操作はキャンセルされます。

図7：effectAllowed／dropEffectプロパティが一致しない場合（クリックで拡大）

TIPS 065：ドラッグアイコンをカスタマイズする

setDragImageメソッドを利用することで、ドラッグ時のアイコン画像を差し替えることもできます。アプリの動作によっては、独自のアイコンによって、より操作の結果を直感的に知らせることができるでしょう。

［リスト07］ドラッグ時のアイコンをカスタマイズするコード（icon.html）

  <script>
  window.addEventListener('DOMContentLoaded', function() {
    // ドラッグ／ドロップ対象の要素を取得
    var drag = document.querySelector('#drag');
    var drop = document.querySelector('#drop');
    
    // ドラッグ開始時の処理を定義
    drag.addEventListener('dragstart', function(e) {
      // アイコン画像を準備＆ドラッグアイコンとして設定
      var icon = document.createElement('img');
      icon.src = 'icon.jpg';
      e.dataTransfer.setDragImage(icon, 0, 0);
      e.dataTransfer.setData('text', e.target.id);
    }, true);
    ...中略...
  });
  </script>