Drag Drop Project

title: "Drag and Drop Project — Build a Complete Accessible Drag-Drop System" description: "Build a production-ready accessible drag-and-drop system with keyboard alternatives, ARIA support, touch handling, and screen reader announcements." weight: 12 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, drag-drop]

Apply everything you learned by building a complete accessible drag-and-drop system with mouse, keyboard, and touch support.

## What You'll Learn

How to combine all drag-drop patterns into a single production-ready component.

## Why It Matters

A complete drag-drop system must work for all users regardless of input method. Combining mouse, keyboard, and touch support is the goal.

## Real-World Use

A project management kanban board lets users drag tasks between columns. Keyboard users use Move buttons. Touch users long-press to drag. Screen reader users hear position announcements.

## Complete System

```html
<div role="region" aria-label="Task board">
  <div id="drag-status" role="status" aria-live="polite" aria-atomic="true"></div>

  <div class="board-columns">
    <div class="column" role="listbox" aria-label="To Do"
         aria-dropeffect="move" data-column="todo">
      <h2>To Do</h2>
      <ol role="list">
        <li role="listitem" tabindex="0" draggable="true"
            aria-grabbed="false" aria-label="Task 1: Design homepage"
            data-task="Design homepage" data-column="todo">
          <button class="drag-handle" aria-label="Drag Design homepage"
                  touch-action="none">
            <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
              <circle cx="12" cy="6" r="2" fill="#666"/>
              <circle cx="12" cy="12" r="2" fill="#666"/>
              <circle cx="12" cy="18" r="2" fill="#666"/>
            </svg>
          </button>
          <span class="task-text">Design homepage</span>
          <select class="move-select" aria-label="Move task to">
            <option value="">Move to...</option>
            <option value="todo">To Do</option>
            <option value="progress">In Progress</option>
            <option value="done">Done</option>
          </select>
        </li>
      </ol>
    </div>
  </div>
</div>

JavaScript

// Move between columns via select
document.querySelectorAll('.move-select').forEach(select => {
  select.addEventListener('change', function() {
    const task = this.closest('[role="listitem"]');
    const targetColumn = this.value;
    if (!targetColumn) return;

    const targetList = document.querySelector(`[data-column="${targetColumn}"] ol`);
    targetList.appendChild(task);
    task.querySelector('.drag-handle').focus();

    const status = document.getElementById('drag-status');
    status.textContent = `${task.dataset.task} moved to ${targetColumn}`;
    this.value = '';
  });
});

// Keyboard drag via buttons
document.querySelectorAll('.drag-handle').forEach(handle => {
  handle.addEventListener('click', function() {
    const task = this.closest('[role="listitem"]');
    const isGrabbed = task.getAttribute('aria-grabbed') === 'true';
    task.setAttribute('aria-grabbed', isGrabbed ? 'false' : 'true');
    const status = document.getElementById('drag-status');
    status.textContent = isGrabbed
      ? `${task.dataset.task} released`
      : `${task.dataset.task} grabbed. Use column dropdown to move.`;
  });
});

Common Mistakes

1. Only one input method supported

Support mouse drag, keyboard move buttons, and touch drag.

2. No visual feedback for drag state

Change opacity or add a drop shadow when dragging.

3. No live region for all actions

Every drag action (grab, move, drop, cancel) must be announced.

4. Focus not managed between columns

When moving between columns, focus must go to the item in its new column.

5. No touch-action on mobile

Set touch-action: none on drag handles for touch devices.

Practice Questions

1. What three input methods must a complete drag-drop system support? Mouse, keyboard, and touch.

2. How do you move an item between columns with keyboard? Use a select dropdown or buttons that move the item to the target column.

3. What should be announced when an item moves between columns? The item name, source column, and destination column.

Challenge: Build a complete kanban board with three columns (To Do, In Progress, Done). Support mouse drag, keyboard move via select, and touch drag.

FAQ

Mini Project

Build a complete kanban board with mouse drag, keyboard move (select dropdown), touch support, ARIA states, and screen reader announcements.

What's Next

Now explore ARIA Basics to deepen your understanding of ARIA roles, states, and properties across all components.