DataTransferItem : Object

DataTransferItem represents an item that can is being dragged. There can be more than one DataTransferItem for a drag and drop operation. For example, dragging a document may have a DataTransferItem containing the rich text and a DataTransferItem containing the plain text.

Spec

Instance Properties

kind : String readonly

The kind of the item. Will be one of 'string' or 'file'.

Example:

<div draggable='true' ondragstart='onDragStart(event)' style='background: #adf'>
  Drag Me<br>
  allowedEffect: <select id='allowedEffectSelect'></select>
</div>

<div id='dropTarget' style='background: #eee'>
  Drop Here ('Drag Me' or a text or image file from your computer)<br>
  dropEffect: <select id='dropEffectSelect'></select>
</div>
<textarea id='textOutput' style='width: 200px; height: 100px'></textarea>
<img id='imgOutput' style='width: 100px; height: 100px'>
<script>
  var allowedEffects = ['none', 'copy', 'link', 'move', 'copyLink',
                        'copyMove', 'linkMove', 'all', 'uninitialized'];
  var allowedEffectSelect = document.getElementById('allowedEffectSelect');
  allowedEffects.forEach(function(option, i) {
    allowedEffectSelect.add(new Option(option, option));
  });
  allowedEffectSelect.value = 'copy';

  var dropEffects = ['none', 'copy', 'link', 'move'];
  var dropEffectSelect = document.getElementById('dropEffectSelect');
  dropEffects.forEach(function(option, i) {
    dropEffectSelect.add(new Option(option, option));
  });
  dropEffectSelect.value = 'copy';

  var onDragStart = function(event) {
    event.dataTransfer.effectAllowed = allowedEffectSelect.value;
    event.dataTransfer.items.add('Dragged text', 'text/plain');
  };

  var dropTarget = document.getElementById('dropTarget');

  dropTarget.ondragenter = function(event) {
    // The browser cancels the drop by default. preventDefault to stop that
    event.preventDefault();
  };

  dropTarget.ondragover = function(event) {
    event.dataTransfer.dropEffect = dropEffectSelect.value;

    // The browser cancels the drop by default. preventDefault to stop that
    event.preventDefault();
  };

  var textOutput = document.getElementById('textOutput');
  var imgOutput = document.getElementById('imgOutput');

  dropTarget.ondrop = function(event) {
    var items = event.dataTransfer.items;

    for (var i = 0; i < items.length; i++) {
      var item = items[i];

      console.log(event.dataTransfer.dropEffect + ': kind=' + item.kind + ', type=' + item.type);
      if (item.kind === 'string') {
        item.getAsString(function(data) {
          textOutput.textContent = data;
        });
      }
      else { // item.kind === 'file'
        if (item.type.indexOf('text/') === 0) {
          var reader = new FileReader();
          reader.onload = function(event) {
            textOutput.textContent = event.target.result;
          };
          reader.readAsText(item.getAsFile());
        }
        else if (item.type.indexOf('image/') === 0) {
          imgOutput.src = URL.createObjectURL(item.getAsFile());
        }
      }
    }

    event.preventDefault();
  };
</script>

Run