PR

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

2013年3月1日(金)
山田 祥寛(YAMADA, Yoshihiro)

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>
図8:ドラッグ時のアイコンを独自のicon.jpgで差替(クリックで拡大)
※本サンプルは、IEでは動作しません

setDragImageメソッドの引数には「ドラッグアイコン」「X座標」「Y座標」の順で指定します。ドラッグアイコンは、あらかじめImageオブジェクトとして用意しておきます。

X/Y座標は、アイコン画像をマウスポインタの位置からずらしたい場合に利用します。デフォルトでは、マウスポインタ位置にアイコン画像を表示します。

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

著者
山田 祥寛(YAMADA, Yoshihiro)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています