HTML dropzone Attribute

The dropzone attribute in HTML is used to specify whether the dragged data is copied, moved, or linked when it is dropped on any element. This attribute is new in HTML5.

Syntax:

<element dropzone = "move | link | copy">

Attribute Value:

move: This attribute is used to drag the data and drop it into a new location.
copy: This attribute is used to copy the drag data into the new location.
link: This attribute is used to drop the data that will result in the original data.

Example: In this example, we use the dropzone attribute on <div> elements. It defines how dragged items should be handled: copied, moved, or linked when dropped into the respective divs.

html

<!DOCTYPE html>
<html>

<head>
    <title>ruby tag</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2> dropzone attribute</h2>
    <div dropzone="copy">GFG</div>
    <div dropzone="move">GFG</div>
    <div dropzone="link">GFG</div>
</body>

</html>

Output:

https://media.geeksforgeeks.org/wp-content/uploads/dropzone.png

Note: The dropzone attribute doesn't support by the popular browsers.

Explore