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.

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">

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

// Select the draggable element by its ID
let draggableElem = document.getElementById("draggable-elem");

// Initialize variables to store initial mouse coordinates and movement state
let initialX = 0,
  initialY = 0;
let moveElement = false;

// Define an object to store event types for mouse and touch interactions
let events = {
  mouse: {
    down: "mousedown",
    move: "mousemove",
    up: "mouseup",
  touch: {
    down: "touchstart",
    move: "touchmove",
    up: "touchend",

// Initialize a variable to store the type of input device (mouse or touch)
let deviceType = "";

// Function to detect touch device by attempting to create a TouchEvent
const isTouchDevice = () => {
  try {
    deviceType = "touch"; // If successful, set deviceType to "touch"
    return true;
  } catch (e) {
    deviceType = "mouse"; // If unsuccessful, set deviceType to "mouse"
    return false;

isTouchDevice(); // Detect the type of input device

// Event listener for the start of dragging (mousedown or touchstart)
draggableElem.addEventListener(events[deviceType].down, (e) => {
  e.preventDefault(); // Prevent default behavior of the event

  // Store initial x and y coordinates based on the type of input device
  initialX = !isTouchDevice() ? e.clientX : e.touches[0].clientX;
  initialY = !isTouchDevice() ? e.clientY : e.touches[0].clientY;

  // Set moveElement flag to true to indicate that dragging has started
  moveElement = true;

// Event listener for dragging movement (mousemove or touchmove)
draggableElem.addEventListener(events[deviceType].move, (e) => {
  // Check if dragging is in progress
  if (moveElement) {
    e.preventDefault(); // Prevent default behavior of the event

    // Calculate new x and y coordinates based on the type of input device
    let newX = !isTouchDevice() ? e.clientX : e.touches[0].clientX;
    let newY = !isTouchDevice() ? e.clientY : e.touches[0].clientY;

    // Update the position of the draggable element relative to the initial position =
      draggableElem.offsetTop - (initialY - newY) + "px"; =
      draggableElem.offsetLeft - (initialX - newX) + "px";

    // Update initial coordinates for the next movement calculation
    initialX = newX;
    initialY = newY;

// Event listener for the end of dragging (mouseup or touchend)
  (stopMovement = (e) => {
    // Set moveElement flag to false to indicate that dragging has ended
    moveElement = false;

// Event listener to stop movement when the mouse leaves the draggable area
draggableElem.addEventListener("mouseleave", stopMovement);

// Additional event listener to ensure movement stops on touchend event
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

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.