blob: f9d3df7c5a293e09d0b72871e01530a009657534 (
plain)
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
138
|
---
title: DataTransfer.effectAllowed
slug: Web/API/DataTransfer/effectAllowed
tags:
- API
- HTML DOM
- Property
- Reference
- drag and drop
translation_of: Web/API/DataTransfer/effectAllowed
---
<div>{{APIRef("HTML Drag and Drop API")}}</div>
<p><strong><code>DataTransfer.effectAllowed</code></strong> プロパティは、ドラッグ操作で許可される effect を指定します。<em>コピー</em>操作は、ドラッグされるデータが現在の位置からドロップ位置にコピーされることを示すために使用されます。<em>移動</em>操作は、ドラッグされるデータが移動されることを示すために使用され、<em>リンク</em>操作は、ソース・ロケーションとドロップ・ロケーションの間に何らかの形の関係または接続が作成されることを示すために使用されます。</p>
<p>このプロパティは、{{event("dragstart")}} イベントで設定して、ドラッグソースのドラッグ効果を設定する必要があります。イベントハンドラ {{event("dragenter")}} および{{event("dragover")}} 内では、このプロパティは {{event("dragstart")}} イベントで割り当てられた値に設定されるため、どの効果が許可されているかを決定するために <code>effectAllowed</code> を使用することができます。</p>
<p>イベント {{event("dragstart")}} 以外のイベントで <code>effectAllowed</code> に値を代入しても何の効果もありません。</p>
<h2 id="シンタックス">シンタックス</h2>
<pre class="syntaxbox notranslate"><var>dataTransfer</var>.effectAllowed;
</pre>
<h3 id="値">値</h3>
<p>許可されているドラッグ操作を表す {{domxref("DOMString")}}。可能な値は以下の通りです。</p>
<dl>
<dt>none</dt>
<dd>アイテムはドロップしない場合があります。</dd>
<dt>copy</dt>
<dd>ソースアイテムのコピーは、新しい場所で作成することができます。</dd>
<dt>copyLink</dt>
<dd>コピーやリンク操作は許可されています。</dd>
<dt>copyMove</dt>
<dd>コピーや移動の操作は許可されています。</dd>
<dt>link</dt>
<dd>新しい場所のソースへのリンクが確立されている場合があります。</dd>
<dt>linkMove</dt>
<dd>リンクや移動の操作は許可されています。</dd>
<dt>move</dt>
<dd>アイテムは新しい場所に移動することができます。</dd>
<dt>all</dt>
<dd>すべての操作が許可されています。</dd>
<dt>uninitialized</dt>
<dd>effect が設定されていない場合のデフォルト値で、全ての effect に相当します。</dd>
</dl>
<p><code>effectAllowed</code> に他の値を代入しても効果はなく、古い値が保持されます。</p>
<p>Internet Explorer では、値を小文字に変更するので、<code>linkMove</code> は <code>linkmove</code> になります。</p>
<h2 id="例">例</h2>
<p>この例では、<code>effectAllowed</code> プロパティと {{domxref("DataTransfer.dropEffect", "dropEffect")}} プロパティを使用しています。</p>
<pre class="brush: js notranslate"><!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>
</pre>
<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-effectallowed", "effectAllowed")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-effectallowed", "effectAllowed")}}</td>
<td>{{Spec2("HTML5.1")}}</td>
<td>初期定義</td>
</tr>
</tbody>
</table>
<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
<p>{{Compat("api.DataTransfer.effectAllowed")}}</p>
<h2 id="あわせて参照">あわせて参照</h2>
<p>{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}</p>
|
