Who knows the purpose of the new global dropzone attribute added in HTML5 and also would like to know which browser supports it? Thank you!
Who knows the purpose of the new global dropzone attribute added in HTML5 and also would like to know which browser supports it? Thank you!
Firstly, I want to make it clear that the dropzone=""
attribute is not yet supported by any browser, so even though it tries to use it it will not work and it is still experimental, that is, it may become standard as well as be removed from W3 standards even before any browser can implement it.
Any html element can use the dropzone
attribute having more than one value or not, these values must be separated by spaces, the supported values are:
copy (example: <div dropzone="copy">
)
Indicates that the element will accept drop items of the specified type and will result in a copy of the data that has been dragged.
move (example: <div dropzone="move">
)
Indicates that the element will accept drop items of the specified type and the dragged data will be moved to the new location.
link (example: <div dropzone="link">
)
Indicates that the element will accept drop items of the specified type and will result in a link to the data.
Limiting by file type:
<div dropzone="copy f:image/png f:image/gif f:image/jpeg">
This will limit the data type image, png, jpeg and gif
In short, as far as I understand w3.org, the idea is that if you move an image in the area that has the element you can limit the types of files or other elements that can be "dropped" in the element with the dropzone=""
attribute %, these files or elements will result in data that is likely to be readable by the DOM API of the browser's JavaScript, but it's like I said no browser supports it yet and we do not know if this attribute will be released one day .
However it is possible to do dropzone without the attribute, using events such as ondrag
and ondrop
, matching with the File API or DOM API (depending on the that you want to drop in that zone).