DEV Community

Cover image for Draggable Div Element in HTML CSS & JavaScript
Afzal Imam
Afzal Imam

Posted on

4 1

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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!

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay