This article needs a technical review. How you can help.
The DataTransferItem.kind
property returns the drag data item
kind. It must be one of the following:
- file
- If the drag data item is a file.
- string
- If the kind of drag data item is a plain Unicode string.
This property is Read only .
Syntax
dataItem.kind;
Return value
A DOMString
representing the drag data item's kind. It must be one of the values listed above.
Example
This example shows the use of the kind
property.
function drop_handler(ev) { console.log("Drop"); ev.preventDefault(); var data = event.dataTransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // This item is the target node data[i].getAsString(function (s){ ev.target.appendChild(document.getElementById(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // Drag data item is HTML console.log("... Drop: HTML"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // Drag data item is URI console.log("... Drop: URI"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // Drag data item is an image file var f = data[i].getAsFile(); console.log("... Drop: File "); } } }
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'kind' in that specification. |
Living Standard | |
HTML5.1 The definition of 'kind' in that specification. |
Working Draft | Not included in W3C HTML5 Recommendation |
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 |