W3cubDocs

/Web APIs

DataTransferItemList

The DataTransferItemList object is a list of DataTransferItem objects representing items being dragged. During a drag operation, each DragEvent has a dataTransfer property and that property is a DataTransferItemList.

The individual items can be accessed using the bracket notation [].

This interface has no constructor.

Instance properties

DataTransferItemList.length Read only

An unsigned long that is the number of drag items in the list.

Instance methods

DataTransferItemList.add()

Adds an item (either a File object or a string) to the drag item list and returns a DataTransferItem object for the new item.

DataTransferItemList.remove()

Removes the drag item from the list at the given index.

DataTransferItemList.clear()

Removes all of the drag items from the list.

DataTransferItemList.operator[]

Getter that returns a DataTransferItem at the given index.

Example

This example shows how to use drag and drop.

JavaScript

js

function dragstartHandler(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
  const 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 dropHandler(ev) {
  console.log("Drop");
  ev.preventDefault();

  // Loop through the dropped items and log their data
  for (const item of ev.dataTransfer.items) {
    if (item.kind === "string" && item.type.match(/^text\/plain/)) {
      // This item is the target node
      item.getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (item.kind === "string" && item.type.match(/^text\/html/)) {
      // Drag data item is HTML
      item.getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (item.kind === "string" && item.type.match(/^text\/uri-list/)) {
      // Drag data item is URI
      item.getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragoverHandler(ev) {
  console.log("dragOver");
  ev.preventDefault();

  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragendHandler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;

  // Clear any remaining drag data
  dataList.clear();
}

HTML

html

<div>
  <p
    id="source"
    ondragstart="dragstartHandler(event);"
    ondragend="dragendHandler(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="dropHandler(event);"
  ondragover="dragoverHandler(event);">
  Drop Zone
</div>

CSS

css

div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DataTransferItemList 13 12 50 No 12 6 4.4 18 50 ≤14 6 1.0
add 13 12 50 No 12 6 4.4 18 50 ≤14 6 1.0
clear 13 12 50 No 12 6 4.4 18 50 ≤14 6 1.0
length 13 12 50 No 12 6 4.4 18 50 ≤14 6 1.0
remove 31 12 50 No 12 6 4.4.3 31 50 ≤14 6 2.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/DataTransferItemList