DataTransfer: types property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

TheDataTransfer.types read-only property returns the available types that exist in theitems.

Value

An array of the data formats. Each format is a stringwhich is generally a MIME type such astext/plain ortext/html. If the dragoperation included no data, this list will be empty. If any files are included inthe drag operation, then one of the types will be the stringFiles.

Examples

This example shows the use of thetypes anditems properties.

html

<ul>  <li draggable="true">Drag Item 1 to the Drop Zone</li>  <li draggable="true">Drag Item 2 to the Drop Zone</li></ul><div>Drop Zone</div><pre></pre>

css

div {  margin: 0em;  padding: 2em;}#target {  border: 1px solid black;}

const output = document.getElementById("output");function log(msg) {  output.textContent += `${msg}\n`;}document.querySelectorAll("li").forEach((item) => {  item.addEventListener("dragstart", dragstartHandler);});function dragstartHandler(ev) {  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";}const target = document.getElementById("target");target.addEventListener("drop", (ev) => {  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++) {    log(`… types[${i}] = ${ev.dataTransfer.types[i]}`);  }  // Print each item's "kind" and "type"  for (let i = 0; i < ev.dataTransfer.items.length; i++) {    log(      `… items[${i}].kind = ${ev.dataTransfer.items[i].kind}; type = ${ev.dataTransfer.items[i].type}`,    );  }});target.addEventListener("dragover", (ev) => {  ev.preventDefault();  ev.dataTransfer.dropEffect = "move";});