draggable element javascript

JavaScript Draggable Div Element

JavaScript Draggable Div Element

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


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 -->
    href="https://unpkg.com/[email protected]/css/boxicons.min.css"


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

The output would be:


JavaScript Draggable Div Element
JavaScript Draggable Div Element


Next, we use CSS to style it.

Add To Cart Button Html

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;
      background: #08f0f8;
      color: #fff;
      background: #08f0f8;
      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.addEventListener("mousemove", onDrag);
       document.addEventListener("mouseup", ()=>{
         header.removeEventListener("mousemove", onDrag);
The final output would be:

Final Output

JavaScript Draggable Div Element
JavaScript Draggable Div Element


100+ JavaScript Projects With Source Code ( Beginners to Advanced)

And that’s all for this project.

Written by @codingporium

Leave a Reply