The DataTransferItem()
getter method implements support for accessing items in the DataTransferItemList
using array-style syntax (that is DataTransferItem[index]
).
Syntax
dataItem = DataTransferItem[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
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();
}
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>
CSS
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
Result
[[../../../../../../../mdn.mozillademos.org/en-US/docs/Web/API/DataTransferItemList/DataTransferItem%24samples/Example_Drag_and_Drop42ff|Drag and Drop demo link]]
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'DataTransferItem getter' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DataTransferItemList[]
|
Chrome
Full support 13 |
Edge
Full support ≤79 |
Firefox
Full support 50 |
IE
No support No |
Opera
Full support 12 |
Safari
Full support 6 |
WebView Android
Full support 4.4 |
Chrome Android
Full support 18 |
Firefox Android
Full support 50 |
Opera Android
No support No |
Safari iOS
Full support 6 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
DataTransferItemList.DataTransferItem() by Mozilla Contributors is licensed under CC-BY-SA 2.5.