diff options
Diffstat (limited to 'files/ja/web/api/globaleventhandlers/ondrop')
| -rw-r--r-- | files/ja/web/api/globaleventhandlers/ondrop/index.html | 116 |
1 files changed, 116 insertions, 0 deletions
diff --git a/files/ja/web/api/globaleventhandlers/ondrop/index.html b/files/ja/web/api/globaleventhandlers/ondrop/index.html new file mode 100644 index 0000000000..9e7b84dbd1 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ondrop/index.html @@ -0,0 +1,116 @@ +--- +title: GlobalEventHandlers.ondrop +slug: Web/API/GlobalEventHandlers/ondrop +tags: + - API + - HTML DOM + - Reference + - drag and drop +translation_of: Web/API/GlobalEventHandlers/ondrop +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{event("drop")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate">var <var>dropHandler</var> = <var>targetElement</var>.ondrop; +</pre> + +<h3 id="戻り値">戻り値</h3> + +<dl> + <dt><code>dropHandler</code></dt> + <dd><code>targetElement</code> 要素の <em>drop</em> イベントハンドラ。</dd> +</dl> + +<h2 id="例">例</h2> + +<p>この例では、{{domxref("GlobalEventHandlers.ondrop", "ondrop")}} 属性を使用して、要素の {{event("drop")}} イベント・ハンドラを定義することを示しています。</p> + +<pre class="brush: js notranslate"><!DOCTYPE html> +<html lang=ja> +<title>ondrag グローバルイベント属性の使用例</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> +</head> +<script> +function drag_handler(ev) { + console.log("Drag"); +} + +function dragstart_handler(ev) { + console.log("dragStart"); + ev.dataTransfer.setData("text", ev.target.id); +} + +function drop_handler(ev) { + console.log("Drop"); + ev.currentTarget.style.background = "lightyellow"; + + ev.preventDefault(); + var data = ev.dataTransfer.getData("text"); + ev.target.appendChild(document.getElementById(data)); +} + +function dragover_handler(ev) { + console.log("dragOver"); + ev.preventDefault(); +} +</script> +<body> +<h1><code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code> の例</h1> + <div class="source"> + <p id="source" ondrag="drag_handler(event);" 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", "indices.html#ix-handler-ondrop", "ondrop")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondrop", "ondrop")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.GlobalEventHandlers.ondrop")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li>{{event("drop")}}</li> +</ul> |