How to Create a Draggable Div in JavaScript
Tags: javascript, webdev, beginners, html
Published: 2022-04-25 08:35:21

This is a simple JavaScript tutorial on how to create Draggable Div. [JavaScript Draggable Element](https://groundtutorial.com/draggable-element-javascript/) 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](https://www.foolishdeveloper.com/2022/04/draggable-div-javascript.html).

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

{% codepen https://codepen.io/foolishdevweb/pen/PoEOGez default-tab=result %}

If you liked this draggable div and want to get to [source codes](https://www.foolishdeveloper.com/2022/04/draggable-div-javascript.html) 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.
```html
<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.
```css
* {
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.
```javascript
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);

```

Hopefully by using the code above you will know how to create [JavaScript Draggable Div](https://www.foolishdeveloper.com/2022/04/draggable-div-javascript.html). 

If there is any problem, you must comment. If you want, you can download all the code to create Draggable Div element.