JavaScript Draggable Div Element
JavaScript Draggable Div Element

Hey, friends today we will see how to make this draggable div element project using HTML, CSS, and JavaScript. You can see We Drag div from 1 position to the 2nd position we did this functionality with help of javascript
HTML Code
Paste the codes below:
NOTE: This is the CDN link of boxicons because we use 1 icon in our html file drag symbol if you do not use this cdn link project work but this icon does not show in your project.
<!-- Boxicons CSS --> <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />
HTML CODE
<div class="wrapper"> <header>Draggable Div</header> <div class="content"> <div class="icon"><i class='bx bx-move'></i></div> <div class="title">Draggable Div</div> <p>This is a draggable div which is created using HTML CSS & JavaScript. You can move this div anywhere on the document or page.</p> </div> </div>
The output would be:
Next, we use CSS to style it.
CSS Code
Paste the codes below:
/* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body{ background: #08f0f8; } ::selection{ color: #fff; background: #08f0f8; } .wrapper{ position: absolute; top: 50%; left: 50%; max-width: 450px; width: 100%; background: #fff; border-radius: 10px; transform: translate(-50%, -50%); box-shadow: 10px 10px 15px rgba(0,0,0,0.06); } .wrapper header{ font-size: 23px; font-weight: 500; padding: 17px 30px; border-bottom: 1px solid #ccc; } .wrapper header.active{ cursor: move; user-select: none; } .wrapper .content{ display: flex; padding: 30px 30px 40px 30px; align-items: center; flex-direction: column; justify-content: center; } .content .icon{ height: 95px; width: 95px; border-radius: 50%; border: 5px solid #08f0f8; display: flex; align-items: center; justify-content: center; } .content .icon i{ color: #08f0f8; font-size: 60px; } .content .title{ margin: 15px 0; font-size: 29px; font-weight: 500; } .content p{ font-size: 16px; text-align: center; }
Now let’s add JavaScript for draggable div functionality.
Portfolio Website using HTML and CSS (Source Code)
JavaScript Code
Paste the codes below:
const wrapper = document.querySelector(".wrapper"), header = wrapper.querySelector("header"); function onDrag({movementX, movementY}){ let getStyle = window.getComputedStyle(wrapper); let leftVal = parseInt(getStyle.left); let topVal = parseInt(getStyle.top); wrapper.style.left = `${leftVal + movementX}px`; wrapper.style.top = `${topVal + movementY}px`; } header.addEventListener("mousedown", ()=>{ header.classList.add("active"); header.addEventListener("mousemove", onDrag); }); document.addEventListener("mouseup", ()=>{ header.classList.remove("active"); header.removeEventListener("mousemove", onDrag); });
Final Output
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
And that’s all for this project.
Written by @codingporium