Building a Drag and Drop Functionality with HTML, CSS, and JavaScript @rayen-code

Rayen

In the dynamic realm of web development, user interaction is paramount. Adding a drag and drop functionality to your website can significantly enhance the user experience. This tutorial will guide you through creating a seamless drag and drop feature using HTML, CSS, and JavaScript. Elevate your website's interactivity and engage your users with this intuitive and practical addition.




Step 1: HTML Markup:

Start by defining the HTML structure for your drag and drop functionality. Create containers for draggable and droppable elements.
Copy<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag & Drop Tutorial</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" 
    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" 
    crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="heading">Drag & Drop <i class="fa-solid fa-arrow-pointer"></i></div>
    <div class="container">
        <div class="left">
            <div draggable="true" class="item">
                <i class="fa-solid fa-font"></i>
                <span>Rich Text</span>
            </div>
            <div draggable="true" class="item">
                <i class="fa-solid fa-heading"></i>
                <span>heading</span>
            </div>
            <div draggable="true" class="item">
                <i class="fa-solid fa-table"></i>
                <span>table</span>
            </div>
            <div draggable="true" class="item">
                <i class="fa-solid fa-video"></i>
                <span>video</span>
            </div>
            <div draggable="true" class="item">
                <i class="fa-solid fa-image"></i>
                <span>image</span>
            </div>
        </div>
        <div class="mid">
            <div draggable="true" class="item">
                <i class="fa-solid fa-user"></i>
                <span>Account</span>
            </div>
            <div draggable="true" class="item">
                <i class="fa-solid fa-download"></i>
                <span>download</span>
            </div>
            <div draggable="true" class="item">
                <i class="fa-brands fa-wordpress"></i>
                <span>wordpress</span>
            </div>
        </div>
        <div class="right">
            <div draggable="true" class="item">
                <i class="fa-solid fa-arrow-pointer"></i>
                <span>Select</span>
            </div>
            <div draggable="true" class="item">
                <i class="fa-solid fa-crop-simple"></i>
                <span>crop</span>
            </div>
            <div draggable="true" class="item">
                <i class="fa-solid fa-paintbrush"></i>
                <span>Brush</span>
            </div>
            <div draggable="true" class="item">
                <i class="fa-solid fa-palette"></i>
                <span>color</span>
            </div>
        </div>
    </div>


    <script src="main.js"></script>
</body>
</html>

Step 2: Styling with CSS:

Craft a simple CSS file (style.css) to style the draggable and droppable elements. This step is essential for a visually appealing and intuitive interface. 
Copy/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body {
    overflow: hidden;
    
    min-height: 100vh;
}
.heading {
    position: absolute;
    font-size: 5rem;
    top: 50px;
    left: 50%;
    font-family: sans-serif;
    transform: translateX(-50%);
}

.container {
    display: flex;
    justify-content: center;
    gap: 100px;
    padding: 20px;
    min-height: 50vh;
    margin-top: 200px;
}

.left {
    border: 1px solid #e4e4ff;
    width: 345px;
    min-height: 50vh;
    padding: 10px;
}

.left .item {
    position: relative;
    width: 100px;
    height: 100px;
    border: 2px solid #e4e4ff;
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 5px;
    margin: 4px 2px;
    padding: 10px;
    /* color: gray; */
}

.left .item i {
    font-size: 2rem;
    margin-top: 15px;
}



.item:active {
    cursor: grabbing;
}

.item::before {
    content: ":::";
    position: absolute;
}

.left .item::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem;
}



.mid {
    border: 1px solid #e4e4ff;
    width: 250px;
    padding: 10px;

}

.mid .item {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    gap: 20px;
    border: 1px solid #e4e4ff;
    padding: 10px 35px;
    /* color: gray; */
    margin: 5px 0;
}

.mid .item::before {
    left: 10px;
    font-size: 1rem;
    rotate: 90deg;
}


.right {
    border: 1px solid #e4e4ff;
    width: 50px;
    padding: 5px;
}

.right .item {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid #e4e4ff;
    display: flex;
    justify-content: center;
    align-items: center;
    /* color: gray; */
    margin-bottom: 5px;
}


.right .item span {
    display: none;
}

.right .item::before {
    content: "";
    opacity: 0;
}




.right,
.left,
.mid {
    border-top: 5px solid rgb(0, 140, 191);
    border-radius: 5px 5px 0 0;
    background: #ffffff;
    box-shadow: 0 0 30px rgb(198, 198, 198);
}
.item {
    cursor: pointer;
    background: rgb(242, 242, 242);
    color: rgb(92, 92, 92);
}

Step 3: Adding JavaScript Interaction:

Create a JavaScript file (main.js) to implement the drag and drop functionality. This involves handling events like dragstart, drop, and dragover.
Copy//-------------------- Java Script --------------------//
let items = document.querySelectorAll(".item");
let left = document.querySelector(".left");
let mid = document.querySelector(".mid");
let right = document.querySelector(".right");


items.forEach((item)=>{
    item.addEventListener("dragstart", (e) =>{
        let select = e.target;


        left.addEventListener("dragover", (e)=>{
            e.preventDefault();
        })
        left.addEventListener("drop", ()=>{
            left.appendChild(select);
            select = null;
        })


        mid.addEventListener("dragover", (e)=>{
            e.preventDefault();
        })
        mid.addEventListener("drop", ()=>{
            mid.appendChild(select);
            select = null;
        })


        right.addEventListener("dragover", (e)=>{
            e.preventDefault();
        })
        right.addEventListener("drop", ()=>{
            right.appendChild(select);
            select = null;
        })



    })
})

Understand the concept of data transfer during drag and drop. The dragstart event sets the data to be transferred, and the drop event retrieves and handles the data.

Personalize the draggable and droppable elements by adjusting sizes, colors, and content. Experiment with additional features such as feedback during dragging or custom animations.

0 Comments