ドラッグ&ドロップの効果を指定に応じて変更するには
解説
ドラッグ&ドロップには、copy(コピー)、move(移動)、link(リンク作成、Windowsデスクトップではショートカット作成)、none(何もしない)の動作モードが存在し、モードによって既定の動作が異なります。
たとえば、エディターから選択文字列をブラウザ上の領域にドロップする際に、モードがmoveになっていた場合、ドロップが成功すると、もとのエディターの選択文字列は削除されます。
OSやブラウザ、ドラッグ元のアプリケーションの実装によって異なりますが、通常、ドラッグ中にユーザーがシフトキーやコントロールキーなどの修飾キーを押すことによって、ドラッグ&ドロップの動作モードは変更され、表示も対応したものになります。
下はWindows 7での表示例です。ドラッグ元のアプリケーションによって表示は異なる場合があります。
copyの場合
moveの場合
ドラッグ&ドロップの動作モードを表す値はdataTransfer属性のdropEffect属性に文字列として格納され、コードで変更することもできます。
コードで変更する場合、dropEffect属性の指定は、dragover、dragenterイベントごとにクリアされるため、通常、ドロップの直前に起きるondragoverイベントハンドラで指定します。
dataTransfer属性のeffectAllowed属性の値を設定することで、動作モードの範囲をあらかじめ限定することも可能です。effectAllowed属性の指定は通常、ドラッグが開始されるondragstartイベントハンドラで行います。
たとえば、effectAllowed属性に「all」を指定した場合は、該当のドラッグされている要素は、すべての動作モードを取ることができます。「copyMove」を指定した場合、動作モードは「copy」か「move」のどちらかのモードしかとることができません。「move」を指定した場合は、「move」以外の動作モードを取ることはできなくなります。effectAllowed属性に設定できる値は、以下の表のようになっています。
ドロップ時には、以下のように、dropEffect属性を参照して、動作を分岐させます。
ただし、dropEffect属性の実装は最新のFireFox以外では不十分で、設定した値にかかわらず、dragendイベント以外では、「none」が取得される場合があります。
// targetはドラッグ&ドロップされる領域、resultは結果を表示する領域
target.ondragover = function(event){
event.preventDefault();
}
target.ondrop = function(event){
var data = event.dataTransfer.getData("Text");
var effect = event.dataTransfer.dropEffect;
if(effect == "copy"){
//複製が指定された時の処理
} else if (effect == "move") {
//移動が指定された時の処理
}
event.preventDefault();
}
関連項目