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

See also  Tweet Box with Character Limit 2021 Highlighting in JavaScript

If you’re confused about what I’m saying then you can watch a demo of this project or a full video tutorial of it.

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. You can also download the source code files of this draggable div from the given download button.

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.

<!DOCTYPE html>
<!-- Coding By codeithub - youtube.com/codeithub -->
<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 | codeithub</title>
  <link rel="stylesheet" href="https://www.codeithub.com/draggable-div-element-in-javascript/style.css">
  <!-- Linking BoxIcon for Icon -->
 <link href="https://unpkg.com/[email protected]/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.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];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;
}

That’s all, now you’ve successfully created a Draggable Div in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

See also  Small Pure CSS / HTML5 Tooltips

Leave a Reply

Your email address will not be published. Required fields are marked *