DataTransfer.effectAllowed

DataTransfer.effectAllowed プロパティは、ドラッグ操作で許可される effect を指定します。コピー操作は、ドラッグされるデータが現在の位置からドロップ位置にコピーされることを示すために使用されます。移動操作は、ドラッグされるデータが移動されることを示すために使用され、リンク操作は、ソース・ロケーションとドロップ・ロケーションの間に何らかの形の関係または接続が作成されることを示すために使用されます。

このプロパティは、dragstart (en-US) イベントで設定して、ドラッグソースのドラッグ効果を設定する必要があります。イベントハンドラ dragenter (en-US) およびdragover (en-US) 内では、このプロパティは dragstart (en-US) イベントで割り当てられた値に設定されるため、どの効果が許可されているかを決定するために effectAllowed を使用することができます。

イベント dragstart (en-US) 以外のイベントで effectAllowed に値を代入しても何の効果もありません。

シンタックス

dataTransfer.effectAllowed;

値

許可されているドラッグ操作を表す DOMString。可能な値は以下の通りです。

none: アイテムはドロップしない場合があります。
copy: ソースアイテムのコピーは、新しい場所で作成することができます。
copyLink: コピーやリンク操作は許可されています。
copyMove: コピーや移動の操作は許可されています。
link: 新しい場所のソースへのリンクが確立されている場合があります。
linkMove: リンクや移動の操作は許可されています。
move: アイテムは新しい場所に移動することができます。
all: すべての操作が許可されています。
uninitialized: effect が設定されていない場合のデフォルト値で、全ての effect に相当します。

effectAllowed に他の値を代入しても効果はなく、古い値が保持されます。

Internet Explorer では、値を小文字に変更するので、linkMove は linkmove になります。

例

この例では、effectAllowed プロパティと dropEffect プロパティを使用しています。

<!DOCTYPE html>
<html lang=ja>
<title>DataTransfer.{dropEffect,effectAllowed} プロパティの例</title>
<meta content="width=device-width">
<style>
  div {
    margin: 0em;
    padding: 2em;
  }
  #source {
    color: blue;
    border: 1px solid black;
  }
  #target {
    border: 1px solid black;
  }
</style>
<script>
function dragstart_handler(ev) {
 console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
 // この要素の id を drag ペイロードに追加し、
 // drop ハンドラがどの要素をツリーに追加するかを知ることができるようにします。
 ev.dataTransfer.setData("text", ev.target.id);
 ev.dataTransfer.effectAllowed = "move";
}

function drop_handler(ev) {
 console.log("drop: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
 ev.preventDefault();
 // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}

function dragover_handler(ev) {
 console.log("dragOver: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
 ev.preventDefault();
 // dropEffect を移動するように設定します。
 ev.dataTransfer.dropEffect = "move"
}
</script>
<body>
<h1><code>DataTransfer</code>.{<code>dropEffect</code>, <code>effectAllowed</code>} プロパティの例</h1>
 <div>
   <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
     この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。</p>
 </div>
 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
</body>
</html>

仕様

仕様書	ステータス	コメント
HTML Living Standard effectAllowed の定義	現行の標準
HTML 5.1 effectAllowed の定義	勧告	初期定義

ブラウザの互換性

BCD tables only load in the browser

DataTransfer.effectAllowed

シンタックス

値

例

仕様

ブラウザの互換性

あわせて参照