HTML5 Drag & Drop

### Drag and Drop an Element
The HTML5 drag and drop feature allows the user to drag and drop an element to another location. The drop location may be a different application. While dragging an element a translucent representation of the element is follow the mouse pointer.

Let's try out the following example to understand how it basically works:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using Drag and Drop</title>
<script>
    function dragStart(e) {
        // Sets the operation allowed for a drag source
        e.dataTransfer.effectAllowed = "move";
    
        // Sets the value and type of the dragged data
        e.dataTransfer.setData("Text", e.target.getAttribute("id"));
    }
    function dragOver(e) {
        // Prevent the browser default handling of the data
        e.preventDefault();
        e.stopPropagation();
    }
    function drop(e) {
        // Cancel this event for everyone else
        e.stopPropagation();
        e.preventDefault();
    
        // Retrieve the dragged data by type
        var data = e.dataTransfer.getData("Text");
    
        // Append image to the drop box
        e.target.appendChild(document.getElementById(data));
    }
</script>
<style>
    #dropBox {
        width: 300px;
        height: 300px;
        border: 5px dashed gray;
        background: lightyellow;
        text-align: center;
        margin: 20px 0;
        color: orange;
    }
    #dropBox img {
        margin: 25px;
    }
</style>
</head>
<body>
    <h2>Drag and Drop Demo</h2>
    <p>Drag and drop the image into the drop box:</p>
    <div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
        
    </div>
    <img src="../images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="250" height="250" alt="Flying Kites">
</body>
</html>
```
> Tip: You can make an element draggable by setting the draggable attribute to true, like draggable="true". However, in most web browsers, text selections, images, and anchor elements with an href attribute are draggable by default.

### Drag and Drop Events
A number of events are fired during the various stages of the drag and drop operation. But mouse events such as mousemove are not fired during a drag operation.

The following table provides you a brief overview of all the drag and drop events.

<table class="data"><thead><tr><th>Event</th><th>Description</th></tr></thead><tbody><tr><td><code>ondragstart</code></td><td>Fires when the user starts dragging an element.</td></tr><tr><td><code>ondragenter</code></td><td>Fires when a draggable element is first moved into a drop listener.</td></tr><tr><td><code>ondragover</code></td><td>Fires when the user drags an element over a drop listener.</td></tr><tr><td><code>ondragleave</code></td><td>Fires when the user drags an element out of drop listener.</td></tr><tr><td><code>ondrag</code></td><td>Fires when the user drags an element anywhere; fires constantly but can give X and Y coordinates of the mouse cursor.</td></tr><tr><td><code>ondrop</code></td><td>Fires when the user drops an element into a drop listener successfully.</td></tr><tr><td><code>ondragend</code></td><td>Fires when the drag action is complete, whether it was successful or not. This event is not fired when dragging a file to the browser from the desktop.</td></tr></tbody></table>
> Note: The HTML5's drag and drop feature is supported in all major modern browsers like Firefox, Chrome, Opera, Safari and Internet Explorer 9 and above.

HTML5 Drag &amp; Drop

HTML5 Drag & Drop