diff options
Diffstat (limited to 'files/zh-cn/web/api/datatransferitemlist')
| -rw-r--r-- | files/zh-cn/web/api/datatransferitemlist/index.html | 68 | ||||
| -rw-r--r-- | files/zh-cn/web/api/datatransferitemlist/length/index.html | 137 |
2 files changed, 205 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/datatransferitemlist/index.html b/files/zh-cn/web/api/datatransferitemlist/index.html new file mode 100644 index 0000000000..1ffb99b9e7 --- /dev/null +++ b/files/zh-cn/web/api/datatransferitemlist/index.html @@ -0,0 +1,68 @@ +--- +title: DataTransferItemList +slug: Web/API/DataTransferItemList +translation_of: Web/API/DataTransferItemList +--- +<p>{{APIRef("HTML Drag and Drop API")}}</p> + +<p><code><strong>DataTransferItemList</strong></code> 对象是一组代表被拖动项的{{domxref("DataTransferItem")}} 对象的列表。在拖动操作期间，每个{{domxref("DragEvent")}} 都有一个 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 属性，该属性是 <code>DataTransferItemList</code>.</p> + +<p>该接口没有构造函数</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{domxref("DataTransferItemList.length")}} {{readonlyInline}}</dt> + <dd> <code>无符号长整型</code> ：列表中拖动项的数量。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{domxref("DataTransferItemList.add()")}}</dt> + <dd>向拖动项列表中添加新项 ({{domxref("File")}}对象或{{domxref("DOMString","string")}})，该方法返回一个 {{domxref("DataTransferItem")}} 对象。</dd> + <dt>{{domxref("DataTransferItemList.remove()")}}</dt> + <dd>根据索引删除拖动项列表中的对象。</dd> + <dt>{{domxref("DataTransferItemList.clear()")}}</dt> + <dd>清空拖动项列表。</dd> + <dt>{{domxref("DataTransferItemList.DataTransferItem()")}}</dt> + <dd>取值方法：返回给定下标的{{domxref("DataTransferItem")}}对象.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>每个方法或属性都有其引用页面，每一个引用页对应也有使用示例。</p> + +<h2 id="规范">规范</h2> + +<table> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</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="浏览器兼容性">浏览器兼容性</h2> + + + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.DataTransferItemList")}}</p> diff --git a/files/zh-cn/web/api/datatransferitemlist/length/index.html b/files/zh-cn/web/api/datatransferitemlist/length/index.html new file mode 100644 index 0000000000..42dc044eaf --- /dev/null +++ b/files/zh-cn/web/api/datatransferitemlist/length/index.html @@ -0,0 +1,137 @@ +--- +title: DataTransferItemList.length +slug: Web/API/DataTransferItemList/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("<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 = ev.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; + // Clear any remaining drag data + dataList.clear(); +} + +</pre> + +<h3 id="HTML">HTML</h3> + +<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> + +<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="结果">结果</h3> + +<p>{{EmbedLiveSample('Example_Drag_and_Drop')}}</p> + +<p>{{LiveSampleLink('Example_Drag_and_Drop', 'Drag and Drop demo link')}}</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-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>Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.DataTransferItemList.length")}}</p> + +<div>{{APIRef("HTML Drag and Drop API")}}</div> |