Article Categories

Selected Reading

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

Javascript Object Oriented Programming Front End Technology

JavaScript drag and drop functionality provides an intuitive way to move elements within web pages. While the HTML5 Drag and Drop API works well on desktop, touch devices require additional handling to ensure proper functionality.

Basic Drag and Drop Concepts

To make an element draggable in HTML5, add the draggable="true" attribute to the element. By default, images and text selections are draggable, but other elements need this attribute.

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

Drag and Drop Events

The drag and drop process involves two sets of events:

Events on draggable elements:

dragstart - Fires when dragging begins
drag - Fires continuously while dragging
dragend - Fires when dragging stops

Events on drop targets:

dragenter - Fires when dragged element enters drop zone
dragover - Fires continuously while over drop zone
dragleave - Fires when dragged element leaves drop zone
drop - Fires when element is dropped on target

Example: Basic Drag and Drop

<!DOCTYPE HTML>
<html>
<head>
   <style>
      #div1, #div2 {
         float: left;
         width: 100px;
         height: 100px;
         margin: 10px;
         padding: 10px;
         border: 1px solid black;
         background-color: #f0f0f0;
      }
      #drag1 {
         cursor: move;
      }
   </style>
</head>
<body>
   <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="/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>

   <script>
      function allowDrop(ev) {
         ev.preventDefault();
      }

      function drag(ev) {
         ev.dataTransfer.setData("text", ev.target.id);
      }

      function drop(ev) {
         ev.preventDefault();
         var data = ev.dataTransfer.getData("text");
         ev.target.appendChild(document.getElementById(data));
      }
   </script>
</body>
</html>

Touch Device Support

Touch devices don't support the HTML5 Drag and Drop API natively. To make drag and drop work on touch devices, you need to handle touch events:

<!DOCTYPE HTML>
<html>
<head>
   <style>
      .container {
         width: 300px;
         height: 200px;
         border: 2px solid #333;
         margin: 20px;
         position: relative;
         background-color: #f9f9f9;
      }
      .draggable {
         width: 50px;
         height: 50px;
         background-color: #007bff;
         position: absolute;
         cursor: move;
         user-select: none;
         touch-action: none;
      }
   </style>
</head>
<body>
   <div class="container" id="container">
      <div class="draggable" id="draggable"></div>
   </div>

   <script>
      let isDragging = false;
      let startX, startY, initialLeft, initialTop;
      
      const draggable = document.getElementById('draggable');
      
      // Mouse events for desktop
      draggable.addEventListener('mousedown', startDrag);
      document.addEventListener('mousemove', drag);
      document.addEventListener('mouseup', stopDrag);
      
      // Touch events for mobile
      draggable.addEventListener('touchstart', startDragTouch);
      document.addEventListener('touchmove', dragTouch);
      document.addEventListener('touchend', stopDrag);
      
      function startDrag(e) {
         isDragging = true;
         startX = e.clientX;
         startY = e.clientY;
         initialLeft = draggable.offsetLeft;
         initialTop = draggable.offsetTop;
      }
      
      function startDragTouch(e) {
         isDragging = true;
         startX = e.touches[0].clientX;
         startY = e.touches[0].clientY;
         initialLeft = draggable.offsetLeft;
         initialTop = draggable.offsetTop;
         e.preventDefault();
      }
      
      function drag(e) {
         if (!isDragging) return;
         
         const currentX = e.clientX;
         const currentY = e.clientY;
         
         const deltaX = currentX - startX;
         const deltaY = currentY - startY;
         
         draggable.style.left = (initialLeft + deltaX) + 'px';
         draggable.style.top = (initialTop + deltaY) + 'px';
      }
      
      function dragTouch(e) {
         if (!isDragging) return;
         
         const currentX = e.touches[0].clientX;
         const currentY = e.touches[0].clientY;
         
         const deltaX = currentX - startX;
         const deltaY = currentY - startY;
         
         draggable.style.left = (initialLeft + deltaX) + 'px';
         draggable.style.top = (initialTop + deltaY) + 'px';
         
         e.preventDefault();
      }
      
      function stopDrag() {
         isDragging = false;
      }
   </script>
</body>
</html>

Key Points for Touch Compatibility

Use touch-action: none CSS property to prevent default touch behaviors
Handle both mouse and touch events for cross-device compatibility
Call preventDefault() on touch events to prevent scrolling
Use e.touches[0] to get the first touch point coordinates
Set user-select: none to prevent text selection during drag

Comparison: Desktop vs Touch Implementation

Feature	Desktop (HTML5 API)	Touch Devices
Event Handling	dragstart, dragover, drop	touchstart, touchmove, touchend
Data Transfer	dataTransfer object	Manual coordinate tracking
Browser Support	Built-in support	Custom implementation needed

Conclusion

While HTML5 provides native drag and drop for desktop browsers, touch devices require custom event handling using touch events. For universal compatibility, implement both approaches in your applications.

Lokesh Badavath

Updated on: 2026-03-15T23:18:59+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next