files/ja/web/api/datatransfer/dropeffect/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

---
title: DataTransfer.dropEffect
slug: Web/API/DataTransfer/dropEffect
tags:
  - API
  - HTML DOM
  - Property
  - Reference
  - drag and drop
translation_of: Web/API/DataTransfer/dropEffect
---
<div>{{APIRef("HTML Drag and Drop API")}}</div>

<p><strong><code>DataTransfer.dropEffect</code></strong> プロパティは、ドラッグ＆ドロップ操作中にユーザに与えられるフィードバック (通常は視覚的) を制御します。これは、ドラッグ中に表示されるカーソルに影響します。例えば、ユーザがターゲットのドロップ要素の上にカーソルを置くと、ブラウザのカーソルは、どのタイプの操作が発生するかを示すことができます。</p>

<p>{{domxref("DataTransfer")}} オブジェクトを作成すると、<code>dropEffect</code> には文字列の値が設定されます。取得時には、現在の値を返します。設定時、新しい値が以下の値のいずれかであれば、プロパティの現在の値が新しい値に設定され、それ以外の値は無視されます。</p>

<p>{{event("dragenter")}} と {{event("dragover")}} イベントでは、ユーザーがどのようなアクションを要求しているかに基づいて、<code>dropEffect</code> が初期化されます。これをどのように決定するかはプラットフォームによって異なりますが、通常、ユーザーは alt キーなどの修飾キーを押して、希望するアクションを調整することができます。{{event("dragenter")}} と {{event("dragover")}} イベントのイベントハンドラ内では、ユーザーが要求しているアクションとは異なるアクションが必要な場合、<code>dropEffect</code> を修正する必要があります。</p>

<p>{{event("drop")}} と {{event("dragend")}} イベントでは、<code>dropEffect</code> には希望するアクションが設定され、前回の {{event("dragenter")}} または {{event("dragover")}} イベントの後の値が <code>dropEffect</code> になります。例えば、{{event("dragend")}} イベントで、希望する dropEffect が  "move" であれば、ドラッグされているデータはソースから削除されるべきです。</p>

<h2 id="シンタックス">シンタックス</h2>

<pre class="syntaxbox notranslate"><var>dataTransfer</var>.dropEffect;
</pre>

<h3 id="値">値</h3>

<p>ドラッグ操作の効果を表す {{domxref("DOMString")}}。可能な値は以下の通りです。</p>

<dl>
 <dt><code>copy</code></dt>
 <dd>新しい場所にソースアイテムのコピーが作成されます。</dd>
 <dt><code>move</code></dt>
 <dd>アイテムを新しい場所に移動します。</dd>
 <dt><code>link</code></dt>
 <dd>新しい場所のソースにリンクが確立されます。</dd>
 <dt><code>none</code></dt>
 <dd>アイテムはドロップしない場合があります。</dd>
</dl>

<p><code>dropEffect</code> に他の値を代入しても効果はなく、古い値が保持されます。</p>

<h2 id="Example">Example</h2>

<p>この例では、<code>dropEffect</code> と{{domxref("DataTransfer.effectAllowed", "effectAllowed")}} プロパティを使用しています。</p>

<h3 id="HTML_コンテンツ">HTML コンテンツ</h3>

<pre class="brush: html notranslate">&lt;div&gt;
  &lt;p id="source" ondragstart="dragstart_handler(event);" draggable="true"&gt;
    この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。
  &lt;/p&gt;
&lt;/div&gt;
&lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;ドロップゾーン&lt;/div&gt;
</pre>

<h3 id="CSS_コンテンツ">CSS コンテンツ</h3>

<pre class="brush: css notranslate">div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}
</pre>

<h3 id="JavaScript_コンテンツ">JavaScript コンテンツ</h3>

<pre class="brush: js notranslate">function dragstart_handler(ev) {
  console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);

  // この要素の id をドラッグ ペイロードに追加し、ドロップ ハンドラが
  // どの要素をツリーに追加するかを知ることができるようにします。
  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"
}
</pre>

<p>{{EmbedLiveSample('Example', 300, 250)}}</p>

<h2 id="仕様">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">ステータス</th>
   <th scope="col">コメント</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-dropeffect','dropEffect')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-dropeffect','dropEffect')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>初期定義</td>
  </tr>
  <tr>
  </tr>
 </tbody>
</table>

<h2 id="ブラウザの互換性">ブラウザの互換性</h2>

<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div>

<p>{{Compat("api.DataTransfer.dropEffect")}}</p>

<h2 id="あわせて参照">あわせて参照</h2>

<p>{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}</p>