The read-only DataTransferItem.kind
property returns a DataTransferItem
representing the drag data item kind: some text or some file.
Syntax
var itemKind = DataTransferItem.kind;
Return value
A DOMString
representing the drag data item's kind. It must be one of the following values:
'file'
- If the drag data item is a file.
'string'
- If the kind of drag data item is a plain Unicode string.
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 == '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 |
HTML Living StandardThe definition of 'kind' in that specification. | Living Standard | Initial version |
HTML 5.1The definition of 'kind' in that specification. | Recommendation | W3C snapshot of the WHATWG document. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
kind
|
Chrome
Full support 11 |
Edge
Full support 12 |
Firefox
Full support 50 |
IE
No support No |
Opera
Full support 12 |
Safari
Full support 5.1 |
WebView Android
Full support 4 |
Chrome Android
Full support 18 |
Firefox Android
Full support 50 |
Opera Android
No support No |
Safari iOS
Full support 5 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
- Drag and drop
- Drag Operations
- Recommended Drag Types
- Dragging and Dropping Multiple Items
- DataTransfer test - Paste or Drag
DataTransferItem.kind by Mozilla Contributors is licensed under CC-BY-SA 2.5.