DataTransfer.items
The DataTransfer.items
property is a list
of the data transfer items
in a drag operation. The list includes one item for each item in the operation and if the operation had no items, the list is empty.
This property is Read only .
Syntax
JavaScript
Copy Code
<var>dataTransfer</var>.items;
Return value
A list
of DataTransferItem
objects for a drag operation, one list item for each object in the operation. If the drag operation had no data, the list is empty.
Example
This example shows the use of the items
and types
properties.
JavaScript
Copy Code
<!DOCTYPE html> <html lang=en> <title>Examples of DataTransfer.{types,items} properties</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragStart: target.id = " + ev.target.id); // Add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.dataTransfer.setData("text/plain", ev.target.id); ev.dataTransfer.effectAllowed = "move"; } function drop_handler(ev) { console.log("drop: target.id = " + ev.target.id); ev.preventDefault(); // Get the id of the target and add the moved element to the target's DOM var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); // Print each format type if (ev.dataTransfer.types != null) { for (var i=0; i < ev.dataTransfer.types.length; i++) { console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]); } } // Print each item's "kind" and "type" if (ev.dataTransfer.items != null) { for (var i=0; i < ev.dataTransfer.items.length; i++) { console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type); } } } function dragover_handler(ev) { console.log("dragOver"); ev.preventDefault(); // Set the dropEffect to move ev.dataTransfer.dropEffect = "move" } </script> <body> <h1>Examples of <code>DataTransfer</code>.{<code>types</code>, <code>items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">Drag Item 1 to the Drop Zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">Drag Item 2 to the Drop Zone</li> </ul> <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 'items' in that specification. |
Living Standard | |
HTML5.1 The definition of 'items' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 4 | No support | 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 | No support | No support | No support | No support | No support |
See also
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/datatransfer/items