initial commit

3 files changed, 377 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"> &lt;div&gt;
+   &lt;p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"&gt;
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.&lt;/p&gt;
+ &lt;/div&gt;
+ &lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;Drop Zone&lt;/div&gt;</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("&lt;p&gt;... paragraph ...&lt;/p&gt;", "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 &lt; data.length; i++) {
+    if ((data[i].kind == 'string') &amp;&amp; (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') &amp;&amp; (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') &amp;&amp; (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 &lt; 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>
diff --git a/files/ja/web/api/datatransferitemlist/index.html b/files/ja/web/api/datatransferitemlist/index.html
new file mode 100644
index 0000000000..584201eb0c
--- /dev/null
+++ b/files/ja/web/api/datatransferitemlist/index.html
@@ -0,0 +1,78 @@
+---
+title: DataTransferItemList
+slug: Web/API/DataTransferItemList
+tags:
+  - API
+  - DataTransferItemList
+  - HTML DOM
+  - HTML Drag and Drop API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - drag and drop
+translation_of: Web/API/DataTransferItemList
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p>The <code><strong>DataTransferItemList</strong></code> object is a list of {{domxref("DataTransferItem")}} objects representing items being dragged. During a <em>drag operation</em>, each {{domxref("DragEvent")}} has a {{domxref("DragEvent.dataTransfer","dataTransfer")}} property and that property is a <code>DataTransferItemList</code>.</p>
+
+<p>This interface has no constructor.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("DataTransferItemList.length")}} {{readonlyInline}}</dt>
+ <dd>An <code>unsigned long</code> that is the number of drag items in the list.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("DataTransferItemList.add()")}}</dt>
+ <dd>Adds an item (either a {{domxref("File")}} object or a {{domxref("DOMString","string")}}) to the drag item list and returns a {{domxref("DataTransferItem")}} object for the new item.</dd>
+ <dt>{{domxref("DataTransferItemList.remove()")}}</dt>
+ <dd>Removes the drag item from the list at the given index.</dd>
+ <dt>{{domxref("DataTransferItemList.clear()")}}</dt>
+ <dd>Removes all of the drag items from the list.</dd>
+ <dt>{{domxref("DataTransferItemList.DataTransferItem()")}}</dt>
+ <dd>Getter that returns a {{domxref("DataTransferItem")}} at the given index.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>Each of this interface's methods and properties has a reference page, and each reference page has an example of its usage.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#datatransferitemlist','DataTransferItemList')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#datatransferitemlist','DataTransferItemList')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("api.DataTransferItemList")}}</p>
+
+<p> </p>
diff --git a/files/ja/web/api/datatransferitemlist/length/index.html b/files/ja/web/api/datatransferitemlist/length/index.html
new file mode 100644
index 0000000000..90a6b18a13
--- /dev/null
+++ b/files/ja/web/api/datatransferitemlist/length/index.html
@@ -0,0 +1,148 @@
+---
+title: DataTransferItemList.length
+slug: Web/API/DataTransferItemList/length
+tags:
+  - API
+  - DataTransferItemList
+  - HTML DOM
+  - HTML Drag and Drop API
+  - Property
+  - Reference
+  - length
+  - ドラッグアンドドロップ
+translation_of: Web/API/DataTransferItemList/length
+---
+<p>{{domxref("DataTransferItemList")}} インターフェイスの <code><strong>length</strong></code> プロパティは読み取り専用で、ドラッグアイテムリストの中に現在入っているアイテムの数を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>length</em> = <em>DataTransferItemList</em>.length;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">返値</h3>
+
+<p>リスト中のドラッグデータアイテムの数で、もしリストが空か無効であれば 0 です。アイテムリストの {{domxref("DataTransfer")}} オブジェクトがドラッグデータストアに関連付けられていない場合は、ドラッグアイテムリストは無効とみなされます。</p>
+
+<h2 id="Example_Drag_and_Drop" name="Example_Drag_and_Drop">例</h2>
+
+<p>この例は <code>length</code> プロパティの使い方を示しています。</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<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("&lt;p&gt;... paragraph ...&lt;/p&gt;", "text/html");
+  dataList.add("http://www.example.org","text/uri-list");
+}
+
+function drop_handler(ev) {
+  console.log("Drop");
+  ev.preventDefault();
+  var data = ev.dataTransfer.items;
+  // Loop through the dropped items and log their data
+  for (var i = 0; i &lt; data.length; i++) {
+    if ((data[i].kind == 'string') &amp;&amp; (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') &amp;&amp; (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') &amp;&amp; (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;
+  // Clear any remaining drag data
+  dataList.clear();
+}
+
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"&gt;
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.&lt;/p&gt;
+&lt;/div&gt;
+&lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;Drop Zone&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  margin: 0em;
+  padding: 2em;
+}
+
+#source {
+  color: blue;
+  border: 1px solid black;
+}
+
+#target {
+  border: 1px solid black;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example_Drag_and_Drop')}}</p>
+
+<p>{{LiveSampleLink('Example_Drag_and_Drop', 'Drag and Drop demo 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-length','length')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransferitemlist-length','length')}}</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.length")}}</p>
+
+<div>{{APIRef("HTML Drag and Drop API")}}</div>