Drag and Drop Elements Using JavaScript & CSS

Drag and Drop Elements Using JavaScript & CSS

Drag and Drop Elements Using JavaScript

In this tutorial, you will learn how to create javascript drag and drop elements. We see drag and drop JavaScript elements in different web pages or applications. That means we can drag those elements as we wish and keep them wherever we wish.

This type of JavaScript Drag and Drop Sortable is very easy to make. This tutorial will help you if you know basic JavaScript.

The design I have shown here is relatively advanced. Many drag elements have been used here. Earlier I shared a tutorial where I created this project by an element.

JavaScript Drag and Drop

I have created an image gallery with many images here. You can drag each of those images to the place of your choice.

If you do not understand what I am saying then watch the demo below. This preview will help you understand how it works.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see I have created a small gallery of some images. Here are 6 images. Under normal circumstances, these images will stand side by side. Then you can drag and drop those images.

How to make drag and drop in javascript

Clicking on any image and dragging it will follow your mouse cursor. This type of design you can use in any of your applications or web pages. 

It will definitely give your user a new kind of experience. This javascript drag and drop is relatively easy to make.

I have given step by step tutorial below. If you only want the source code then you can see the following sections of the article. Here you will find live previews, step-by-step tutorials, and source code.

Step 1: Basic Area of Drag Elements

First created an area in which all the images can be seen in normal conditions.

<div class=”container”>
</div>

I designed the web page using the following codes. Here we have designed a background color and more on the web page.

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: “Recursive”, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
background-color: #333;
}

Now I will design the box in which all the images can be seen. The width of that area: 45vw, height: 40vh.

.container {
display: flex;
justify-content: center;
align-items: center;
width: 45vw;
height: 40vh;
max-width: 700px;
margin: 0 auto;
flex-wrap: wrap;
}

Step 2: Drag Elements have been added

Now I have added the images. You may use other information instead of this image. Here I have used 8 images. If you want to download the images, you can use the download button below the article.

   <div class=”box one” id=”box1″ draggable=”true”>
      <img src=”img1.jpg” alt=””>
   </div>
   <div class=”box two” id=”box2″ draggable=”true”>
      <img src=”img2.jpg” alt=””>
   </div>
   <div class=”box three” id=”box3″ draggable=”true”>
      <img src=”img3.jpg” alt=””>
   </div>
   <div class=”box four” id=”box4″ draggable=”true”>
      <img src=”img4.jpg” alt=””>
   </div>
   <div class=”box five” id=”box5″ draggable=”true”>
      <img src=”img5.jpeg” alt=””>
   </div>
   <div class=”box six” id=”box6″ draggable=”true”>
      <img src=”img6.jpg” alt=””>
   </div>
.box {
width: 15vw;
height: 15vh;
cursor: move;
position: relative;
}
img{
  width: 100%;
}
Basic Area of Drag Elements

Step 3: JavaScript of Drag and Drop Elements

The above design work has been done. Now it’s time to implement a drag and drop example with JavaScript.

If you know the basics of JavaScript then you can do it easily.

function drag() {
  var dragging = false;
//mouseX represents the x-coordinate of the mouse. 
//mouseY represents the y-coordinate of the mouse.
  var mouseX, mouseY;
  var eleX, eleY;
  var boxes = document.querySelectorAll(“[draggable]”);
   for (let i = 0; i < boxes.length; i++) {
     boxes[i].addEventListener(“mousedown”, mouseDown);
     boxes[i].style.top = 0;
     boxes[i].style.left = 0;
   }
//mousedown() method triggers the mousedown event
   function mouseDown(e) {
     e.preventDefault();
     dragging = this;
      mouseX = e.pageX;
      mouseY = e.pageY;
//Number. parseInt() method parses a string argument and returns an integer of the specified radix
      eleX = Number.parseInt(dragging.style.left);
      eleY = Number.parseInt(dragging.style.top);
       document.addEventListener(“mousemove”, mouseMove);
       document.addEventListener(“mouseup”, mouseUp);
    }
    function mouseMove(e) {
     if (dragging) {
       deltaMouseX = e.pageX – mouseX;
       deltaMouseY = e.pageY – mouseY;
       dragging.style.left = deltaMouseX + eleX + “px”;
       dragging.style.top = deltaMouseY + eleY + “px”;
       }
    }
    function mouseUp(e) {
      dragging = false;
      document.removeEventListener(“mouseup”, mouseUp);
      document.removeEventListener(“mousemove”, mouseMove);
     }
}
drag();
JavaScript of Drag and Drop Elements

Drag and Drop JavaScript (Source Code)

There are many beginners who want to source code together. For them, I have given the following section. Here I have combined all the source code of javascript drag and drop. 

To do this, first, create an HTML file and add the following codes to that file. Since all the code is together here, there is no need to create a separate file.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

However, if you want, you can download the required source code. Hope you like this drag and drop in the javascript project. Earlier I shared a javascript drag and drop example tutorial more easily with an element.