Step-By-Step Guide on How to Create the Drag and Drop using HTML, CSS & JAVASCRIPT
Tags: webdev, javascript, developer, tutorial
Published: 2023-06-05 22:30:37

## Table of Content
  - [Introduction](#introduction)
  - [Prerequisites](#prerequisites)
  - [Steps to Create the Drag and Drop using HTML, CSS \& JAVASCRIPT](#steps-to-create-the-drag-and-drop-using-html-css--javascript)
    - [Step 1: Set up the HTML structure](#step-1-set-up-the-html-structure)
    - [Step 2: Style the elements](#step-2-style-the-elements)
    - [Step 4: Test the functionality](#step-4-test-the-functionality)
  - [Conclusion](#conclusion)

## Introduction

In many graphical user interfaces, dragging and dropping is a typical user interaction. For making a drag-and-drop project, there are already existing JavaScript libraries. The use of JavaScript event handlers, however, allows you to transform any element into a draggable or droppable object.

The HTML Drag and Drop with JavaScript event handlers will be used to create a drag-and-drop project in this article.

So, let’s dive into writing code on how to create a drag-and-drop project:

## Prerequisites

- To complete this tutorial, you will need:
- Basic knowledge of HTML, CSS, and JAVASCRIPT
- VS code
- A modern web browser (Chrome, Firefox, Safari, Edge).


## Steps to Create the Drag and Drop using HTML, CSS & JAVASCRIPT

### Step 1: Set up the HTML structure
In your index.html file, make sure you have the necessary HTML structure for the drag-and-drop functionality.

Copy this to your index.html file

```html
<!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>Drag & Drop Project</title>
    <link rel="stylesheet" href="./assets/css/main.css">
</head>
<body>
    <main class="container">
        <div id="left">
            <div class="list" draggable="true">
                <img src="https://i.ibb.co/wsdYLr4/icon.png" alt="icon" border="0">
                List Item 1
            </div>
            <div class="list" draggable="true">
                <img src="https://i.ibb.co/wsdYLr4/icon.png" alt="icon" border="0">
                List Item 2
            </div>
            <div class="list" draggable="true">
                <img src="https://i.ibb.co/wsdYLr4/icon.png" alt="icon" border="0">
                List Item 3
            </div>
            <div class="list" draggable="true">
                <img src="https://i.ibb.co/wsdYLr4/icon.png" alt="icon" border="0">
                List Item 4
            </div>
        </div>
        <div id="right"></div>
    </main>
<script src="./assets/js/main.js"></script>
</body>
</html>
```

### Step 2: Style the elements

In your main.css file, add the necessary CSS styles to define the appearance of the containers and list items. You can customize the styles as per your preference.

Copy this to your main.css file

```css
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    width: 100%;
    min-height: 100vh;
    background: #0b0423;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: aliceblue;
}
#left, #right {
    width: 300px;
    min-height: 400px;
    margin: 20px;
    border: 2px dashed #61d652;
}
.list{
    background: #e91e63;
    height: 45px;
    margin: 45px;
    color: #fff;
    display: flex;
    align-items: center;
    cursor: grab;
}
.list img{
    width: 10px;
    margin-right: 15px;
    margin-left: 20px; 
}

```

Step 3: Implement the JavaScript functionality
In your main.js file, add the JavaScript code to handle the drag-and-drop functionality.

Copy and paste the following code to your main.js

```js
let lists = document.getElementsByClassName("list");
let rightBox = document.getElementById("right");
let leftBox = document.getElementById("left");

// Add event listener for dragstart on parent element
for (let list of lists) {
  list.addEventListener("dragstart", dragStart);
}

// Prevent default behavior on dragover event
rightBox.addEventListener("dragover", function (e) {
  e.preventDefault();
});

// Handle drop event for rightBox
rightBox.addEventListener("drop", function (e) {
  let selected = document.getElementById("selected");
  rightBox.appendChild(selected);
  selected.removeAttribute("id");
});

// Prevent default behavior on dragover event
leftBox.addEventListener("dragover", function (e) {
  e.preventDefault();
});

// Handle drop event for leftBox
leftBox.addEventListener("drop", function (e) {
  let selected = document.getElementById("selected");
  leftBox.appendChild(selected);
  selected.removeAttribute("id");
});

// Drag start event handler
function dragStart(e) {
  let selected = e.target;
  selected.setAttribute("id", "selected");

  // Add event listener for dragend on selected element
  selected.addEventListener("dragend", function () {
    selected.removeAttribute("id");
  });
}
```

### Step 4: Test the functionality

Open your **index.html** file in a web browser and verify that the drag-and-drop functionality is working as expected. You should be able to drag the list of items from the left box to the right box and vice versa.

That's it! You have successfully built a drag-and-drop project with HTML, CSS, and JAVASCRIPT. Feel free to customize the styles and expand the functionality based on your choice.

Note: Make sure to link the main.js file and **main.css** file in your **index.html** file using appropriate `<script>` and `<link>` tags. 

## Conclusion

This article has provided you with the necessary steps to build a drag-and-drop project using HTML, CSS, and JavaScript. By following these steps, you have learned how to set up the HTML structure, style the elements, and handle the drag-and-drop events.

Congratulations on completing the tutorial! Feel free to explore and enhance the drag-and-drop functionality to create engaging and interactive experiences in your web projects.

You may always look at the code on my [GitHub repository](https://github.com/Daslaw/Drag_and_drop.git) if you get stuck anywhere.

🥰 If you liked this article, consider sharing it.