diff options
Diffstat (limited to 'files/ja/web/api/datatransferitemlist/clear/index.html')
| -rw-r--r-- | files/ja/web/api/datatransferitemlist/clear/index.html | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/files/ja/web/api/datatransferitemlist/clear/index.html b/files/ja/web/api/datatransferitemlist/clear/index.html new file mode 100644 index 0000000000..c06230c89c --- /dev/null +++ b/files/ja/web/api/datatransferitemlist/clear/index.html @@ -0,0 +1,151 @@ +--- +title: DataTransferItemList.clear() +slug: Web/API/DataTransferItemList/clear +tags: + - API + - DataTransferItemList + - HTML DOM + - HTML Drag and Drop API + - Method + - Reference + - clear + - ドラッグアンドドロップ +translation_of: Web/API/DataTransferItemList/clear +--- +<p><span class="seoSummary">{{domxref("DataTransferItemList")}} の <strong><code>clear()</code></strong> メソッドは、ドラッグデータアイテムリストからすべての {{domxref("DataTransferItem")}} オブジェクトを削除し、リストを空にします。</span></p> + +<p>このリストが保持されるドラッグデータストアは、 {{event("dragstart")}} イベントの処理中にのみ書き込み可能になります。 {{event("drop")}} を処理する間、ドラッグデータストアは読み取り専用モードであり、このメソッドは何もしません。例外も投げません。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>DataTransferItemList</em>.clear(); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_Value" name="Return_Value">返値</h3> + +<p>{{jsxref("undefined")}}</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は <code>clear()</code> メソッドの使い方を示します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"> <div> + <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> + Select this element, drag it to the Drop Zone and then release the selection to move the element.</p> + </div> + <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css"> div { + margin: 0em; + padding: 2em; + } + #source { + color: blue; + border: 1px solid black; + } + #target { + border: 1px solid black; + }</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">function dragstart_handler(ev) { + console.log("dragStart"); + // Add this element's id to the drag payload so the drop handler will + // know which element to add to its tree + var dataList = ev.dataTransfer.items; + dataList.add(ev.target.id, "text/plain"); + // Add some other items to the drag payload + dataList.add("<p>... paragraph ...</p>", "text/html"); + dataList.add("http://www.example.org","text/uri-list"); +} + +function drop_handler(ev) { + console.log("Drop"); + ev.preventDefault(); + var data = event.dataTransfer.items; + // Loop through the dropped items and log their data + for (var i = 0; i < data.length; i++) { + if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { + // This item is the target node + data[i].getAsString(function (s){ + ev.target.appendChild(document.getElementById(s)); + }); + } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { + // Drag data item is HTML + data[i].getAsString(function (s){ + console.log("... Drop: HTML = " + s); + }); + } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { + // Drag data item is URI + data[i].getAsString(function (s){ + console.log("... Drop: URI = " + s); + }); + } + } +} + +function dragover_handler(ev) { + console.log("dragOver"); + ev.preventDefault(); + // Set the dropEffect to move + ev.dataTransfer.dropEffect = "move" +} + +function dragend_handler(ev) { + console.log("dragEnd"); + var dataList = ev.dataTransfer.items; + for (var i = 0; i < dataList.length; i++) { + dataList.remove(i); + } + // Clear any remaining drag data + dataList.clear(); +}</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample('Example', 400, 300)}}</p> + +<p>{{LiveSampleLink('Example','Result link')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransferitemlist-clear','clear()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransferitemlist-clear','clear()')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>W3C HTML5 {{Spec2('HTML5 W3C')}} には含まれていない</td> + </tr> + <tr> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.DataTransferItemList.clear")}}</p> + +<div>{{APIRef("HTML Drag and Drop API")}}</div> |