HTML Drag and Drop API
Tags: html, css, webdev, javascript
Published: 2022-01-22 11:39:04

Hey there! Today I will show you a simple implementation of HTML Drag and Drop API. 


![HTML Drag and Drop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vc6pp06br8bivo7nju8.gif)

HTML allows you to drag and drop every element in the browser. Using a mouse you can grab a draggable element and place it inside a droppable element!

Below is a simple implementation!


```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        height: 100vh;
        width: 100%;
        padding: 0%;
        margin: 0%;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    section{
        width: 30%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #222;
        background-color: #efefef;
    }
    div{
        background-color: aqua;
        text-align: center;
        height: 50%;
        width: 50%;
    }
</style>
<body>
    <section
    id="dragzone"
    >
    <div id="draggableitem" ondragstart="drag(event)" draggable="true">
        <h1>Drag me</h1>
    </div>

    </section>
    <section id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"
    >

    </section>
</body>
</html>

<script>

    //Fires when user starts dragging
    function drag(e){
        //adding target elements id to datatransfer object 
        //setData(format,data)
        e.dataTransfer.setData("text",e.target.id)
        console.log("drag")    
    }
    
    //Fired when mouse moves over droppable element
    function allowDrop(e) {
        e.preventDefault()
        console.log("over drop zone")
    }

    //fired when the element is dropped
    function drop(e) {
    console.log("dropped")
    e.preventDefault();
    //getting data and appending it to the target section
    var data = e.dataTransfer.getData("text");
    e.target.appendChild(document.getElementById(data));
    }
</script>
```

Lets go through the code, one part at a time!

**HTML code:**
Here we are having two sections. One drag zone and one drop zone. 
Div is the element which we wish to drag and drop. We then set the draggable attribute of the Div tag as "true".

"ondragstart" event runs when you grab the draggable item. Further more, in drop section, we have two events. “ondragover” starts firing when you move the dragged item over the drop zone and “ondrop” fires when you drop the item by releasing the mouse button.
We even have more events if you wish to apply more logic to your component. In our current implementation this 3 events are enough.

![HTML code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gdrqtqvgjtw3we968p8.png)

**CSS code:**
Basic CSS code where I am centering the sections and div so we can easily understand the drag and drop layout.


![CSS code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gao1cneuvordjyyuoa3.png)

**JavaScript code:**
So using JS we add the draggable element using its ID to the dataTransfer object. Then on reaching the drop zone we append the draggable element to the drop zone section. 
The explanation of each step in the functions has been added in the comments.

![JS code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41f2gv12sq58msptchuz.png)

For further reference you can read this MDN documentation for Drag and Drop API. https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

Hope this article helped you in knowing Drag and Drop feature in HTML. I regularly post tweets regarding HTML, CSS, JS, React, Cloud and Blockchain on my twitter. Do follow me if you love such topics. Thanks!