The DataTransfer.types
read-only property returns the available types that exist in the items
.
The DataTransfer.types
read-only property returns the available types that exist in the items
.
An array of the data formats used in the drag operation. Each format is a string which is generally a MIME type such as text/plain
or text/html
. If the drag operation included no data, this list will be empty. If any files are included in the drag operation, then one of the types will be the string Files
.
This example shows the use of the types
and items
properties.
html
<!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 const data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); // Print each format type for (let i = 0; i < ev.dataTransfer.types.length; i++) { console.log(`… types[${i}] = ${ev.dataTransfer.types[i]}`); } // Print each item's "kind" and "type" for (let 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>
Specification |
---|
HTML Standard # dom-datatransfer-types-dev |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
types |
3 | 12 | 3.5 | ≤12.1As of Opera 12,Text is returned instead of text/plain |
4 | ≤37 | 18 | 4 | ≤12.1 | 3.2 | 1.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types