How to Create a Draggable Div in JavaScript

#javascript #webdev #beginners #html

This is a simple JavaScript tutorial on how to create Draggable Div. JavaScript Draggable Element You can create very easily if you know the basic JavaScript.

Draggable div we see in many places. Usually seen a lot of time between large applications and websites. However, they are made in a very advanced way. But it is a simple design.

Draggable Div is a kind of element that you can drag anywhere. Here I have created a Draggable profile card.

For your convenience I have given a preview below. Here you will find all the code and live preview.

If you liked this draggable div and want to get to source codes or files then you can easily get it from this article.

In the JavaScript codes, first I added a mouse down event on the header, and inside the function of it, I added a mouse move event and called an onDrag function.

✅ HTML Code:

The basic structure of the Draggable Div element has been created using the following code.

Here I have just created a basic structure i.e. a box. Here you can add the information of your choice.

<div id="dragable">
  <header id="dragzone">
   <!-- add any information-->
  </header>
</div>

✅ CSS Code:
The code below is the css by which the webpage and the draggable element are designed.

* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

html,
body {
height: 100%;
}

body {
background: #78c7ed;
font-family: sans-serif;
}

#dragable {
width: 21rem;
height: 21rem;
border: 0.2rem solid #0f2c65;
border-radius: 0.2rem;
position: absolute;
z-index: 9;
box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.2);
transition: border-color 0.2s, box-shadow 0.2s;
}

#dragable.drag {
border-color: white;
box-shadow: 3px 6px 24px rgba(0, 0, 0, 0.5);
}

#dragable #dragzone {
width: 100%;
height: 100%;
cursor: move;
z-index: 10;
background-color: #0f2c65;
}

✅ JavaScript Code:
Now it's time to activate this css draggable div by some javascript.

A little bit of advanced JavaScript is used here but it will not be difficult to understand Beginners and a half.

const dragElement = (element, dragzone) => {
    let pos1 = 0,
      pos2 = 0,
      pos3 = 0,
      pos4 = 0;
//MouseUp occurs when the user releases the mouse button
    const dragMouseUp = () => {
      document.onmouseup = null;
//onmousemove attribute fires when the pointer is moving while it is over an element.
      document.onmousemove = null;

      element.classList.remove("drag");
    };

    const dragMouseMove = (event) => {

      event.preventDefault();
//clientX property returns the horizontal coordinate of the mouse pointer
      pos1 = pos3 - event.clientX;
//clientY property returns the vertical coordinate of the mouse pointer
      pos2 = pos4 - event.clientY;
      pos3 = event.clientX;
      pos4 = event.clientY;
//offsetTop property returns the top position relative to the parent
      element.style.top = `${element.offsetTop - pos2}px`;
      element.style.left = `${element.offsetLeft - pos1}px`;
    };

    const dragMouseDown = (event) => {
      event.preventDefault();

      pos3 = event.clientX;
      pos4 = event.clientY;

      element.classList.add("drag");

      document.onmouseup = dragMouseUp;
      document.onmousemove = dragMouseMove;
    };

    dragzone.onmousedown = dragMouseDown;
  };

  const dragable = document.getElementById("dragable"),
    dragzone = document.getElementById("dragzone");

  dragElement(dragable, dragzone);