Step-By-Step Guide on How to Create the Drag and Drop using HTML, CSS & JAVASCRIPT

#webdev #javascript #developer #tutorial

Table of Content

Introduction
Prerequisites
Steps to Create the Drag and Drop using HTML, CSS & JAVASCRIPT
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

<!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

*{
    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

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 if you get stuck anywhere.

🥰 If you liked this article, consider sharing it.

Top comments (3)

Bryan King Pecho • Jun 6 '23

I appreciate how this tutorial covers the prerequisites and walks through each step to create a drag-and-drop feature. The code is well-explained, and the visuals in the article are a nice touch. Thank you for sharing! 🙌