How to Create a Draggable Element With JavaScript

In this article you will know how to create Draggable Element using html css and javascript. We see JavaScript Draggable Element in many websites.

Basically this type of design(How to Create a Draggable Element) is used a lot to show any notification or information. You can drag this element anywhere.

Create a Draggable Element With JavaScript

If you want to create this type of simple Draggable Element JavaScript then you have come to the right place.

Here I will tell you how to create Draggable Element using JavaScript. Here you will find step by step tutorial, source code and live preview of this html Draggable Element.

JavaScript Draggable Element

See the Pen Untitled by Ground Tutorial (@groundtutorial) on CodePen.

Earlier I have shared many types of Draggable Element html css tutorial with you. They are more advanced and the JavaScript used in them is more difficult. But if you are advanced in javascript you can see that design.

The Draggable div element is basically a floating section that can be moved from one end of the web page to the other just by dragging. This will greatly increase the value of your webpage without harming any SEO.

Draggable Element Using JavaScript

Now if you want to build this project(Create a Draggable Element With JavaScript) then follow the tutorial below. If you are a beginner then you have no reason to worry. Here you will find explanation of each line.

Here I have created the basic structure by html. Then designed it by css. Then activated the Draggable Element by javascript.

1. Create and design draggable spaces

First we will create a basic structure on the web page using the following html and css codes. This structure will basically span the entire web page. Within this area we can drag elements.

I have used gradient color by linear-gradient in the background of the webpage.

				
					<div id="container">

</div>
				
			
				
					body {
  padding: 0;
  margin: 0;
  background: linear-gradient(135deg, #a3d0f1, #021560);
}

#container {
  height: 100vh;
  width: 100vw;
  position: relative;
}
Create and design draggable spaces

2. Basic Structure of Draggable Element

Now we will create the Draggable Element. For this I simply created a box and added a paragraph in it. Width: 7em, height: 7em and background color of the box is white.

				
					<div id="draggable-elem">
  <p>Drag Me</p>
</div>
				
			
				
					#draggable-elem {
  position: absolute;
  background-color: #ffffff;
  font-size: 1.6em;
  width: 7em;
  height: 7em;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  font-family: "Poppins", sans-serif;
  border-radius: 0.3em;
  cursor: move;
}
Basic Structure of Draggable Element

3. Activate Draggable div Element with JavaScript

Above we have just designed this JavaScript Draggable Element. Now is the time to activate it. 

Here I have used a lot of JavaScript as it is enabled for both mobile and desktop. But there is no reason to worry. Here I have given the explanation of the complete code.

				
					let draggableElem = document.getElementById("draggable-elem");
let initialX = 0,
    initialY = 0;
let moveElement = false;

//Events Object
let events = {
  mouse: {
    down: "mousedown",
    move: "mousemove",
    up: "mouseup",
  },
  touch: {
    down: "touchstart",
    move: "touchmove",
    up: "touchend",
  },
};

let deviceType = "";

//Detech touch device
const isTouchDevice = () => {
  try {
    //We try to create TouchEvent (it would fail for desktops and throw error)
    document.createEvent("TouchEvent");
    deviceType = "touch";
    return true;
  } catch (e) {
    deviceType = "mouse";
    return false;
  }
};

isTouchDevice();

//Start (mouse down / touch start)
draggableElem.addEventListener(events[deviceType].down, (e) => {
  e.preventDefault();
  //initial x and y points
  initialX = !isTouchDevice() ? e.clientX : e.touches[0].clientX;
  initialY = !isTouchDevice() ? e.clientY : e.touches[0].clientY;

  //Start movement
  moveElement = true;
});

//Move
draggableElem.addEventListener(events[deviceType].move, (e) => {
  //if movement == true then set top and left to new X andY while removing any offset
  if (moveElement) {
    e.preventDefault();
    let newX = !isTouchDevice() ? e.clientX : e.touches[0].clientX;
    let newY = !isTouchDevice() ? e.clientY : e.touches[0].clientY;
    draggableElem.style.top =
      draggableElem.offsetTop - (initialY - newY) + "px";
    draggableElem.style.left =
      draggableElem.offsetLeft - (initialX - newX) + "px";
    initialX = newX;
    initialY = newY;
  }
});

//mouse up / touch end
draggableElem.addEventListener(
  events[deviceType].up,
  (stopMovement = (e) => {
    moveElement = false;
  })
);

draggableElem.addEventListener("mouseleave", stopMovement);
draggableElem.addEventListener(events[deviceType].up, (e) => {
  moveElement = false;
});
Activate Draggable div Element with JavaScript

Hopefully, from the above tutorial, you got to know how I created this Draggable Element JavaScript. 

Earlier I shared more advanced design(How to Create a Draggable Div in JavaScript). But this is for beginners. Comment how you liked this JavaScript Draggable Element tutorial.

If you want to create drag and drop Javascript then this tutorial is perfect for you. Although earlier I shared one more tutorial. Where I have created a drag and drop login form with javascript.

If you want to create Draggable HTML Element then this article will help you. Although it is not possible to create Draggable Element with only html so I have used javascript and css here.

If you want to create HTML Drag and Drop by API then you can see this tutorial. You will get all the information in this tutorial made by w3schools.com.

I have previously shared another good tutorial on creating JavaScript draggable elements inside div. Hope that tutorial will help you completely.

As I said earlier this tutorial is enough to create javascript draggable div. Here I have shared step by step tutorial. Even if you are a beginner you will not have any problem.

 

Source Code