Drag and Drop Events

testing

Drag and drop functionality in JavaScript allows developers to create dynamic, user-friendly interfaces. From sorting lists to resizing elements, drag-and-drop interactions enhance interactivity and usability on modern web applications. In this guide, we’ll explore how to implement drag-and-drop events with practical examples, ensuring clarity with modern UI design and centered layouts.

In this section, we’ll cover the following topics:

What Are Drag and Drop Events?

Drag and drop events enable users to click, drag, and move elements across the web page. These events are essential for creating applications like file uploaders, customizable dashboards, and sortable lists. By leveraging drag-and-drop functionality, you can build interactive features that feel intuitive and modern.

Common Drag and Drop Events

• dragstart: Fires when an item starts being dragged.
• drag: Fires as the item is being dragged.
• dragenter: Fires when the dragged item enters a drop target.
• dragover: Fires continuously as the dragged item is moved over a drop target.
• dragleave: Fires when the dragged item leaves a drop target.
• drop: Fires when the dragged item is dropped.
• dragend: Fires when the drag operation ends.

Key Properties and Methods

• event.dataTransfer:
  • setData(format, data): Stores drag-related data.
  • getData(format): Retrieves data stored during the drag operation.
• event.preventDefault(): Prevents the default behavior, allowing custom drop actions.
• event.target: Identifies the element interacting with the event.

Drag and Drop Event Cross-Device Support

Native drag-and-drop events (dragstart, dragover, drop, etc.) are primarily designed for desktop environments. On mobile devices, these events do not work natively because touch gestures like swiping and tapping replace mouse-based interactions.

To achieve cross-device compatibility, you need to:

• Use touch events (touchstart, touchmove, and touchend) alongside drag-and-drop events.
• Consider using the Pointer Events API, which unifies mouse, touch, and pen inputs.
• Utilize third-party libraries like interact.js for advanced drag-and-drop with touch support or SortableJS for list reordering.

Here’s a minimal example of cross-device drag-and-drop using touchmove for mobile support:

Example Code for Cross-Device Drag and Drop:

let draggingItem = null;
function startDrag(event) {
  draggingItem = event.target;
  draggingItem.classList.add('dragging');
}
function moveDrag(event) {
  if (!draggingItem) return;
  const touch = event.touches ? event.touches[0] : event;
  draggingItem.style.position = 'absolute';
  draggingItem.style.left = `${touch.clientX}px`;
  draggingItem.style.top = `${touch.clientY}px`;
}
function endDrag() {
  if (draggingItem) {
    draggingItem.classList.remove('dragging');
    draggingItem = null;
  }
}
// Add event listeners
document.querySelectorAll('.draggable-item').forEach(item => {
  item.addEventListener('mousedown', startDrag);
  item.addEventListener('touchstart', startDrag, { passive: false });
});
document.addEventListener('mousemove', moveDrag);
document.addEventListener('touchmove', moveDrag, { passive: false });
document.addEventListener('mouseup', endDrag);
document.addEventListener('touchend', endDrag);

This approach ensures that drag-and-drop interactions are smooth on both desktop and mobile devices.

Implementing Drag and Drop Events with AI Assistance

Integrating drag-and-drop events into your project can be simplified with AI-driven solutions. Let’s dive into hands-on examples designed for real-world scenarios.

Preparing for Practice Files
This course uses a practical approach. Create the following folder and files for the examples:

/your-project-folder/
  |─07-11-drag-and-drop-events/ (<- sub-folder)  
    |─ example-1.css  
    |─ example-1.html  
    |─ example-1.js  
    |─ example-2.css  
    |─ example-2.html  
    |─ example-2.js  
    |─ example-3.css  
    |─ example-3.html  
    |─ example-3.js  
    |─ example-4.css  
    |─ example-4.html  
    |─ example-4.js

For your convenience, these files are also available on our GitHub repository.

AI Case 1: Moving Boxes Between Two Sections

Moving elements between sections on a webpage is a common drag-and-drop use case. This example demonstrates how to drag boxes from one section and drop them into another.

Sample AI prompt:

Sample code output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="example-1.css" />
    <script src="example-1.js" defer></script>
    <title>Drag and Drop Example: Move Boxes</title>
  </head>
  <body>
    <div class="container">
      <h1>Drag and Drop Example: Move Boxes</h1>
      <p>
        Drag the boxes from one section to the other. The drop area will be
        highlighted when a box is dragged over it.
      </p>
      <div class="sections-wrapper">
        <div class="section" id="section-1">
          <h2>Section 1</h2>
          <div class="box" draggable="true">Box 1</div>
          <div class="box" draggable="true">Box 2</div>
        </div>
        <div class="section" id="section-2">
          <h2>Section 2</h2>
        </div>
      </div>
    </div>
  </body>
</html>

/* General styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f9f9f9;
}

.container {
  text-align: center;
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

p {
  font-size: 16px;
  margin-bottom: 20px;
  color: #666;
}

/* Section styles */
.sections-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.section {
  border: 2px dashed #ccc;
  border-radius: 8px;
  background-color: #fff;
  width: 45%;
  min-height: 200px;
  padding: 10px;
  transition: background-color 0.3s, border-color 0.3s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section h2 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #555;
}

.section.highlight {
  background-color: #e3fcef;
  border-color: #4caf50;
}

/* Box styles */
.box {
  background-color: #4caf50;
  color: #fff;
  border-radius: 4px;
  margin: 5px 0;
  padding: 10px;
  cursor: grab;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.box:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.hidden {
  display: none;
}

const boxes = document.querySelectorAll(".box");
const sections = document.querySelectorAll(".section");

boxes.forEach((box) => {
  box.addEventListener("dragstart", (event) => {
    event.dataTransfer.setData("text/plain", box.textContent);
    setTimeout(() => box.classList.add("hidden"), 0);
  });

  box.addEventListener("dragend", () => {
    box.classList.remove("hidden");
  });
});

sections.forEach((section) => {
  section.addEventListener("dragover", (event) => {
    event.preventDefault();
    section.classList.add("highlight");
  });

  section.addEventListener("dragleave", () => {
    section.classList.remove("highlight");
  });

  section.addEventListener("drop", (event) => {
    event.preventDefault();
    const data = event.dataTransfer.getData("text/plain");
    const box = Array.from(boxes).find((b) => b.textContent === data);
    if (box) {
      section.appendChild(box);
      section.classList.remove("highlight");
    }
  });
});

Instructions to see the results:
Save the code above in each file. Open the HTML file in your browser to view draggable boxes being moved between sections.

To see how the code works, you can also check out the link below.

Demo Web Page 28

AI Case 2: Resizing Elements with Mouse Drag

Resizing elements dynamically improves interactivity, particularly for applications like dashboards, graphic editors, and design tools. This example demonstrates resizing a box by dragging its corner, allowing users to adjust the size in real time.

Sample AI prompt:

Sample code output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="example-2.css" />
    <script src="example-2.js" defer></script>
    <title>Drag and Drop Example: Resizing Elements</title>
  </head>
  <body>
    <div class="container">
      <h1>Drag and Drop Example: Resizing Elements</h1>
      <p>
        Drag the bottom-right corner of the box to resize it dynamically. The
        dimensions will adjust in real time.
      </p>
      <div class="resizable-box">
        <div class="resize-handle"></div>
      </div>
    </div>
  </body>
</html>

/* General styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f9f9f9;
}

.container {
  text-align: center;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

p {
  font-size: 16px;
  margin-bottom: 20px;
  color: #666;
}

/* Resizable box styles */
.resizable-box {
  width: 200px;
  height: 150px;
  border: 2px solid #4caf50;
  border-radius: 8px;
  background-color: #e8f5e9;
  position: relative;
  margin: 0 auto;
}

.resize-handle {
  width: 16px;
  height: 16px;
  background-color: #4caf50;
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
  border-radius: 50%;
}

const resizableBox = document.querySelector(".resizable-box");
const resizeHandle = document.querySelector(".resize-handle");
let isResizing = false;

resizeHandle.addEventListener("mousedown", (event) => {
  isResizing = true;
});

document.addEventListener("mousemove", (event) => {
  if (isResizing) {
    const boxRect = resizableBox.getBoundingClientRect();
    resizableBox.style.width = `${event.clientX - boxRect.left}px`;
    resizableBox.style.height = `${event.clientY - boxRect.top}px`;
  }
});

document.addEventListener("mouseup", () => {
  isResizing = false;
});

Instructions to see the results:
Save the code above in each file. Open the HTML file in your browser to see a resizable box that dynamically adjusts its size as you drag the bottom-right corner.

To see how the code works, you can also check out the link below.

Demo Web Page 29

AI Case 3: Sorting List Items with Drag-and-Drop

Sorting lists dynamically enhances user interaction for tasks such as prioritizing items in a to-do list or managing content order. This example allows users to drag and drop list items to rearrange their order, providing a seamless and intuitive experience.

Sample AI prompt:

Sample code output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="example-3.css" />
    <script src="example-3.js" defer></script>
    <title>Drag and Drop Example: Sorting List Items</title>
  </head>
  <body>
    <div class="container">
      <h1>Drag and Drop Example: Sorting List Items</h1>
      <p>
        Drag the list items to rearrange their order. The items will adjust as
        you move them.
      </p>
      <ul class="sortable-list">
        <li class="sortable-item" draggable="true">Item 1</li>
        <li class="sortable-item" draggable="true">Item 2</li>
        <li class="sortable-item" draggable="true">Item 3</li>
        <li class="sortable-item" draggable="true">Item 4</li>
      </ul>
    </div>
  </body>
</html>

/* General styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  background-color: #f9f9f9;
}

.container {
  text-align: center;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

p {
  font-size: 16px;
  margin-bottom: 20px;
  color: #666;
}

/* Sortable list styles */
.sortable-list {
  list-style: none;
  padding: 0;
  width: 300px;
  margin: 0 auto;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.sortable-item {
  padding: 10px;
  margin: 5px;
  background-color: #4caf50;
  color: #fff;
  border-radius: 4px;
  cursor: move;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.sortable-item.dragging {
  opacity: 0.5;
}

.sortable-item.over {
  border: 2px dashed #000;
}

const items = document.querySelectorAll(".sortable-item");
let draggingItem = null;

items.forEach((item) => {
  item.addEventListener("dragstart", () => {
    draggingItem = item;
    item.classList.add("dragging");
  });

  item.addEventListener("dragover", (event) => {
    event.preventDefault();
    const overItem = event.target;
    if (overItem !== draggingItem) {
      const rect = overItem.getBoundingClientRect();
      const offset = event.clientY - rect.top;

      if (offset > rect.height / 2) {
        overItem.parentNode.insertBefore(draggingItem, overItem.nextSibling);
      } else {
        overItem.parentNode.insertBefore(draggingItem, overItem);
      }
    }
  });

  item.addEventListener("dragend", () => {
    draggingItem.classList.remove("dragging");
    draggingItem = null;
  });
});

Instructions to see the results:
Save the code above in each file. Open the HTML file in your browser to view a sortable list where items can be rearranged by drag-and-drop.

To see how the code works, you can also check out the link below.

Demo Web Page 30

AI Case 4: Sorting List Items with Cross-Device Support

Sorting list items dynamically enhances productivity by allowing users to prioritize tasks or reorganize content effortlessly. This example demonstrates how to make list reordering compatible with both desktop and mobile devices.

Sample AI prompt:

Sample code output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="example-4.css" />
    <script src="example-4.js" defer></script>
    <title>Drag and Drop Example: Cross-Device Sorting List</title>
  </head>
  <body>
    <div class="container">
      <h1>Drag and Drop Example: Cross-Device Sorting List</h1>
      <p>
        Drag the list items to rearrange their order. This works seamlessly on
        both desktop and mobile devices.
      </p>
      <ul class="sortable-list">
        <li class="sortable-item" draggable="true">Item 1</li>
        <li class="sortable-item" draggable="true">Item 2</li>
        <li class="sortable-item" draggable="true">Item 3</li>
        <li class="sortable-item" draggable="true">Item 4</li>
      </ul>
    </div>
  </body>
</html>

/* General styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  background-color: #f9f9f9;
}

.container {
  text-align: center;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

p {
  font-size: 16px;
  margin-bottom: 20px;
  color: #666;
}

/* Sortable list styles */
.sortable-list {
  list-style: none;
  padding: 0;
  width: 300px;
  margin: 0 auto;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.sortable-item {
  padding: 10px;
  margin: 5px;
  background-color: #6a1b9a; /* Purple button color for distinction */
  color: #fff;
  border-radius: 4px;
  cursor: move;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.sortable-item.dragging {
  opacity: 0.5;
}

.sortable-item.over {
  border: 2px dashed #000;
}

const items = document.querySelectorAll(".sortable-item");
let draggingItem = null;

// Desktop Drag-and-Drop
items.forEach((item) => {
  item.addEventListener("dragstart", () => {
    draggingItem = item;
    item.classList.add("dragging");
  });

  item.addEventListener("dragover", (event) => {
    event.preventDefault();
    const overItem = event.target;
    if (overItem !== draggingItem) {
      const rect = overItem.getBoundingClientRect();
      const offset = event.clientY - rect.top;

      if (offset > rect.height / 2) {
        overItem.parentNode.insertBefore(draggingItem, overItem.nextSibling);
      } else {
        overItem.parentNode.insertBefore(draggingItem, overItem);
      }
    }
  });

  item.addEventListener("dragend", () => {
    draggingItem.classList.remove("dragging");
    draggingItem = null;
  });
});

// Mobile Touch Events
items.forEach((item) => {
  item.addEventListener("touchstart", (event) => {
    draggingItem = item;
    draggingItem.classList.add("dragging");
  });

  item.addEventListener("touchmove", (event) => {
    event.preventDefault();
    const touch = event.touches[0];
    const overItem = document.elementFromPoint(touch.clientX, touch.clientY);
    if (
      overItem &&
      overItem !== draggingItem &&
      overItem.classList.contains("sortable-item")
    ) {
      const rect = overItem.getBoundingClientRect();
      const offset = touch.clientY - rect.top;

      if (offset > rect.height / 2) {
        overItem.parentNode.insertBefore(draggingItem, overItem.nextSibling);
      } else {
        overItem.parentNode.insertBefore(draggingItem, overItem);
      }
    }
  });

  item.addEventListener("touchend", () => {
    if (draggingItem) {
      draggingItem.classList.remove("dragging");
      draggingItem = null;
    }
  });
});

Instructions to see the results:
Save the code above in each file. Open the HTML file in your browser to see a sortable list that works seamlessly on both desktop and mobile devices.

One of the easiest methods to test it on mobile is to use Live Server on VS Code and connect via an IP address. Open the HTML file with Live Server, set up your Wi-Fi IP address, and access it from your mobile device. For more information about Live Server, visit this webpage.

To see how the code works, you can also check out the link below.

Demo Web Page 31

Best Practices for Drag and Drop Events

Creating a smooth and effective drag-and-drop experience requires attention to user interaction and consistency across various environments. Here are four best practices to ensure your implementation is both intuitive and reliable:

• Plan for Different Input Devices: Consider the strengths of different input types—mouse, touch, and pen—and tailor the drag-and-drop behavior accordingly. Use mouse events for desktop, touch events for mobile, and pointer events when necessary to simplify handling across devices.
• Test for Consistency: Regularly test your drag-and-drop interactions on multiple devices, screen sizes, and browsers. This helps identify potential issues and ensures consistent behavior for all users, regardless of the platform.
• Enhance the User Experience: Make drag-and-drop interactions feel natural by adding visual cues like hover effects, drop targets, and smooth animations. This helps users understand where the draggable elements can be dropped and provides feedback during interactions.
• Ensure Accessibility and Responsiveness: Optimize the layout and interaction for various screen sizes by using responsive design techniques. Implement viewport meta tags and CSS media queries to adapt your drag-and-drop UI for different devices and improve usability on mobile screens.

By following these practices, you can create a smooth and reliable drag-and-drop experience for users across different devices and screen sizes.

Reference links:

Drag and Drop API on MDN

Pointer Events on MDN