ADVERTISEMENT

JavaScript Draggable Div Element

Telegram Group Join Now

ADVERTISEMENT

JavaScript Draggable Div Element

JavaScript Draggable Div Element
JavaScript Draggable Div Element

 

ADVERTISEMENT

ADVERTISEMENT

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:

ADVERTISEMENT

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.

ADVERTISEMENT

<!-- Boxicons CSS -->
<link
    href="https://unpkg.com/boxicons@2.1.4/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:

 

ADVERTISEMENT

JavaScript Draggable Div Element
JavaScript Draggable Div Element

 

Next, we use CSS to style it.

Add To Cart Button Html

ADVERTISEMENT

CSS Code

Paste the codes below:

ADVERTISEMENT

/* 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);
       });
The final output would be:

Final Output

JavaScript Draggable Div Element
JavaScript Draggable Div Element

 

ADVERTISEMENT

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

ADVERTISEMENT

And that’s all for this project.

ADVERTISEMENT

Written by @codingporium

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT