dropzone
The historical dropzone attribute was proposed to describe how an element should receive dragged files or text. It is obsolete and not a dependable way to implement drag and drop.
What you will learn
- What the
dropzoneattribute was intended to do - Why it is obsolete and should not be used in new projects
- How to build a practical alternative with current APIs and file inputs
Historical syntax
<!-- Historical example: do not rely on this. -->
<div dropzone="copy file:image/png">Drop an image here</div>Browser support was inconsistent, and the attribute did not provide the complete keyboard, touch, validation, or upload behavior an application needs.
Provide a file input first
<label for="upload">Choose an image</label>
<input id="upload" type="file" accept="image/*">A file input works without drag and drop and is available to keyboard and touch users. Add a visible drop area only as an enhancement, keeping the input as a reliable fallback.
Modern drag-and-drop design
Use dragover and drop events when appropriate, prevent default behavior only for the intended drop area, and announce the state clearly. Validate file type, size, and content on the server; client-side hints are not security controls.