aria-dropeffect — Indicating Drop Target Behavior

In this tutorial, you will learn about aria. We cover key concepts, practical examples, and best practices to help you master this topic.

aria-dropeffect indicates what happens when a dragged element is dropped on a target, with values like move, copy, execute, link, and none describing the operation result.

In this tutorial, you'll learn how to use aria-dropeffect in ARIA drag and drop.

What You'll Learn

By the end of this lesson, you'll understand the five aria-dropeffect values, how to pair them with aria-grabbed, and how to implement accessible drop targets.

Why It Matters

Screen reader users need to know what will happen before they drop an item. aria-dropeffect tells them the action type.

Real-World Use

Durga Antivirus Pro uses aria-dropeffect="move" on quarantine folders and aria-dropeffect="copy" on backup folders.

Drop Effect Flow

flowchart TD
  A[Drag starts] --> B[Identify valid drop targets]
  B --> C[Set aria-dropeffect on each target]
  C --> D[move - Item will be moved]
  C --> E[copy - Item will be copied]
  C --> F[link - Item will be linked]
  C --> G[execute - Action will run]
  C --> H[popup - Popup will open]
  D --> I[User drops item]
  I --> J[Perform operation]
  J --> K[Clear aria-dropeffect]

How aria-dropeffect Works

aria-dropeffect is set on elements that are valid drop targets during a drag:

<div role="list" aria-label="Scan folders">
  <div role="listitem" aria-dropeffect="move">
    Quarantine
  </div>
  <div role="listitem" aria-dropeffect="copy">
    Backup
  </div>
</div>

aria-dropeffect Values

<div aria-dropeffect="move">Move here</div>
<div aria-dropeffect="copy">Copy here</div>
<div aria-dropeffect="execute">Execute</div>

Dynamic Management

Manage aria-dropeffect during the drag lifecycle:

function startDrag() {
  document.querySelectorAll('.drop-target').forEach(target => {
    if (isValidTarget(target)) {
      target.setAttribute('aria-dropeffect', 'move');
    } else {
      target.setAttribute('aria-dropeffect', 'none');
    }
  });
}

function endDrag() {
  document.querySelectorAll('.drop-target').forEach(target => {
    target.removeAttribute('aria-dropeffect');
  });
}

Common Mistakes

• Leaving aria-dropeffect permanently: Only set it during active drag operations.
• Using aria-dropeffect without aria-grabbed: Both are needed for full drag communication.
• Setting invalid values: Use only specified token values.
• Forgetting to clear stale effects: All targets should have dropeffect cleared when drag ends.
• Not announcing the result: After drop, tell the user what happened.

Practice and Challenge

1. What does aria-dropeffect="move" mean? The item will be moved to this target.

2. What should aria-dropeffect be set to when not dragging? It should not be present, or set to none.

3. What ARIA attribute pairs with aria-dropeffect? aria-grabed on the dragged element.

4. What value indicates a copy operation? copy.

5. Challenge: Create two lists where items can be moved between them. Use aria-grabbed on dragged items and aria-dropeffect on valid targets.

FAQ

Mini Project

Build a file manager interface with two folders. Implement drag and drop to move files between folders. Use aria-grabbed on files and aria-dropeffect on folder targets.

What's Next

Continue to aria-haspopup to learn about indicating popup elements.