What is Drag and Drop feature in JavaScript

Drag and drop functionality of JavaScript is much of an essential thing to be used in most of the webpages. This is simple yet very much useful. Drag and drop function in JavaScript enables us to perform different tasks related to frontend which are shifting images or media on-page, and it also helps to get data from our system to the backend of the webpage which is getting media files and documents.

The drag and drop functionality constitutes basic HTML which provides an area where the execution takes place, followed by some CSS styling to make the visibility of the process of drag and drop, easier and at last the JavaScript to make things happen.

Building a functioning drag and drop the project.

Events name to be used:

• dragstart
• dragend
• dragover

Start with the HTML file, add some containers to your HTML with a class named container. And inside of these containers put some <p> tags with gradually increasing numbers or letters.

Give those <p> tags, a class name of draggable to make it more convenient than this section is going to made draggable. Along with this, add an attribute of draggable which is set to true to each of the <p> tags.

Example:

<div class="container">

      <p class="draggable" draggable="true">1</p>

      <p class="draggable" draggable="true">2</p>

</div>

After this start giving it some style in the style sheet which is linked to the HTML file. Set the color of container different of the draggable elements, to make it easier to observe.

Example:

.draggable {

  height: 50px;

  padding: 1rem;

  background-color: rgb(139, 204, 247);

  border: 1px solid black;

  cursor: move;

}

In the above example, the cursor is set to move which will give it a texture of dragging. The draggable items are styles precisely to make it easy to be noticed while performing the drag and drop function by JavaScript.

At last set up the JavaScript file. Select the elements from HTML which we need, in the JavaScript file.

Example:

const draggables = document.querySelectorAll('.draggable')

const containers = document.querySelectorAll('.container')

document.querySelectorAll() is used because it is needed to select all the elements with the specific class, tag or id name.

Working with the style

Define a class named style in the style sheet which will work with the opacity of the elements before and after dragging them.

Set up a function that will fire itself for each of the elements saved in the const variable of draggable. For this, it is required to use .forEach so that we can loop through each of our draggable elements.

Define the function with an event listener and an event of dragstart. This event will fire every time we start dragging the <p> elements. Then add the class name in that division.

After that add another event listener under the same function, which will operate with the elements when we leave them after dragging, For this, it is required to use dragend event with the event listener. Then remove the class name in that division.

Working with the dropping of element’s value

Again define a function with .forEach and add event listener of dragover. This will keep on firing the function as long as we keep it on dragging and hovering over.

Now get the value of the dragged element in a constant value and append the element where it is dropped with the constant value we got previously.

Example:

containers.forEach(container => {

  container.addEventListener('dragover', e => {

    e.preventDefault()

    

    const draggable = document.querySelector('.dragging')

   

      container.appendChild(draggable)




  })

})

NOTE: e.preventDefault() enables us to make it possible without loading the page further.

For further reference visit my GitHub repo.