DataTransferItemList.DataTransferItem()
The DataTransferItemList()
getter method implements support for accessing items in the DataTransferItemList
using array-style syntax (that is DataTransferItemList[index]
).
Syntax
JavaScript
Copy Code
dataItem = DataTransferItemList[index];
Parameters
index
- The zero-based index of the item in the drag data list to return.
Return value
The DataTransferItem
object at the specified index in the item list. If the index is less than zero or greater than or equal to the number of items in the list (as indicated by the list's length
property, undefined
is returned. The returned value is never null
.
Example
This example shows how to use drag and drop.
JavaScript
Copy Code
<!DOCTYPE html> <html lang=en> <title>Examples of DataTransferItemList methods and property</title> <meta name="viewport" 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"); // 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(); } </script> <body> <h1>Example uses of <code>DataTransferItemList</code> methods and property</h1> <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> </body> </html>
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'remove()' in that specification. |
Living Standard | |
HTML5.1 The definition of 'remove()' in that specification. |
Working Draft | Not included in W3C HTML5 Recommendation |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 4 | 50 (50) | No support | 12 | No support |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | No support | No support | No support | 50.0 (50) | No support | No support | No support | No support |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/datatransferitemlist/datatransferitem