Draggable Div Element in HTML CSS & JavaScript

Hey friends, today in this blog, you’ll learn how to create a Draggable Div Element in HTML CSS & JavaScript. In the earlier blog, I have shared how to create a Custom Captcha in JavaScript, and now it’s time to create an easy draggable div using pure JavaScript.

The draggable div element means you can move the particular element anywhere on the document or page by dragging it. In our simple project [Draggable Div Element in JavaScript], as you can see in the preview image, there is a modal box with a header, icon, title, and description.

You can move this modal box anywhere on the page by dragging it on the header part. When you start dragging this model, the cursor will change into a “move” icon to inform the user that this div is now dragging. You can only move this modal box by dragging it on the header.

Draggable Div Element in JavaScript [Source Codes]

To create this small project [Draggable Div Element]. First, you need to create two Files: HTML & CSS files. After creating these files just paste the following codes into your file.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

HTML Code

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Draggable Div Element in JavaScipt | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <!-- Linking BoxIcon for Icon -->
 <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
  <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>

  <script>
    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);
    });
  </script>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS Code

/* 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: #6F36FF;
}
::selection{
  color: #fff;
  background: #6F36FF;
}
.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 #6F36FF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content .icon i{
  color: #6F36FF;
  font-size: 60px;
}
.content .title{
  margin: 15px 0;
  font-size: 29px;
  font-weight: 500;
}
.content p{
  font-size: 16px;
  text-align: center;
}

Also Read:
6 Key Lesson’s to Learn From Rich Dad Poor Dad for Programmers.

So this was all about today post. For more details visit CodeWithImam.

Thanks!

Blog

Draggable Div Element in HTML CSS & JavaScript

Afzal Imam

Draggable Div Element in JavaScript [Source Codes]

Join Our Newsletter. No Spam, Only the good stuff.

Related