How to work with JavaScript Drag and drop for touch devices?

Javascript Object Oriented Programming Front End Technology

In this article, we are going to discuss how to work with JavaScript Drag and drop for touch devices in JavaScript.

Using JavaScript, we can only drag an image and some text. To drag an image, we simply hold the mouse button down and then move it. To drag the text, we need to highlight some text and drag it in the same way as image.

HTML5 specifies almost all elements can be draggable. To make an element draggable, we add the draggable property with the value of true to its HTML element tag.

Syntax

Following is the syntax for the element to make draggable.

<div class="item" draggable="true"></div>

Below are events on draggable elements. These events fire in the sequence when we drag an element.

dragstart
drag
dragend

When you hold a mouse button and begin to move the mouse, the dragstart event fires on the draggable element that you’re dragging. After the dragstart event fires, the drag event fires repeatedly as long as you drag the element. And the dragged event fires when you stop dragging the element.

When you drag an element over a valid drop target, these events fire in the following sequence.

dragenter
dragover
dragleave or drop

The dragenter event fires as soon as you drag the element over a drop target.

After the dragenter event fires, the dragover event fires repeatedly as long as you’re dragging the element within the boundary of the drop target.

When you drag the element outside of the boundary of the drop target, the dragover event stops firing and the dragleave event fires.

In case you drop the element on the target, the drop event fires instead of the dragleave event.

The target (e.target) of the dragenter, dragover, dragleave, and drop events are the drop target elements.

Example

Following is the example program for the drag and drop for touch devices.


<!DOCTYPE HTML>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      #div1, #div2 {
         float: left;
         width: 100px;
         height: 35px;
         margin: 10px;
         padding: 10px;
         border: 1px solid black;
      }
   </style>
   <script>
      function allowDrop(img) {
         img.preventDefault();
      }
      function drag(img) {
         img.dataTransfer.setData("text", img.target.id);
      }
      function drop(img) {
         img.preventDefault();
         var data = img.dataTransfer.getData("text");
         img.target.appendChild(document.getElementById(data));
      }
   </script>
</head>
<body>
   <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
   </div>
   <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><br><br><br><br>
   <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <br><br><br><br><br><br>
   <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>