HTML dropzone Attribute

HTML dropzone Attribute

The obsolete HTML dropzone attribute was intended to describe how an element should respond when data was dragged and dropped onto it, including the type of data accepted and the operation to perform.

Historical Syntax

The dropzone attribute accepted keywords describing the requested drop operation and the type of data the element could accept:

<div dropzone="copy string:text/plain">
  Drop text here
</div>

In this example, the element indicated that plain text could be dropped onto it and that the requested operation was to copy the data.

Historical Elements

The dropzone attribute was defined as a global attribute, so it was intended to be usable on HTML elements generally rather than being limited to one specific element.

Historical Use

The dropzone attribute was designed as a declarative way to describe a drop target. Instead of requiring script to determine basic drop behavior, the attribute could indicate what data an element accepted and what should happen when the data was dropped.

Historical values could describe operations such as copy, move, or link. Additional information could identify acceptable data using a MIME type or other data type information.

The attribute did not become a dependable cross-browser feature, so authors could not rely on this declarative mechanism for drag-and-drop interfaces.

Why It Became Obsolete

The dropzone attribute did not gain sufficient browser implementation to become a practical web feature. Modern drag-and-drop interfaces instead use events and APIs that give scripts direct control over the data being dragged and the actions performed when it reaches a drop target.

Removing the declarative attribute also avoids having two separate mechanisms for controlling the same interaction. Modern applications can handle drag-and-drop behavior through the standardized Drag and Drop API.

Modern Alternative

There is no direct modern HTML attribute that replaces dropzone. When drag-and-drop interaction is needed, JavaScript can respond to drag-and-drop events and inspect the transferred data.

A drop target commonly listens for the dragover event so that dropping can be allowed, followed by the drop event to process the transferred data:

<div id="drop-area">Drop text here</div>

<script>
const dropArea = document.getElementById("drop-area");

dropArea.addEventListener("dragover", event => {
  event.preventDefault();
});

dropArea.addEventListener("drop", event => {
  event.preventDefault();

  const text = event.dataTransfer.getData("text/plain");
  dropArea.textContent = text;
});
</script>

The DataTransfer object provides information about the data involved in the drag operation. Scripts can inspect the available data types and determine whether the dropped information should be accepted.

Drag-and-drop interfaces should not make essential functionality available only through dragging. Provide another usable method, such as buttons, links, or file controls, when the same task needs to be accessible to keyboard, touch, or assistive technology users.

Legacy Browser Support

The dropzone attribute had little practical browser support and never became a reliable way to create cross-browser drop targets.

Modern browsers provide drag-and-drop events and related APIs, but webpages should not expect them to implement the obsolete dropzone attribute.

For additional information about historical browser compatibility, visit Can I Use? . Search for the HTML element or attribute you want to check. Search results can include related HTML features, element attributes, APIs, and other technologies, so select the result that most closely matches the legacy feature you are researching.

Related Attributes

A current HTML attribute related to drag-and-drop behavior is:

• draggable - Indicates whether an element can be dragged using the browser's native drag-and-drop mechanism.

The current draggable attribute does not replace dropzone. It controls whether an element can be dragged, while the obsolete dropzone attribute described a destination that could receive dragged data.

Specifications

The dropzone attribute is obsolete and should not be used in modern HTML. See the WHATWG HTML Living Standard for information about obsolete and non-conforming features.