Case ce-0083 · Scenario scenario-drag-drop-api

Drag and Drop API behavior differs in contenteditable

OS: macOS 14.0 Device: Desktop or Laptop MacBook Pro Browser: Chrome 120.0 Keyboard: US Status: draft
drag-drop api chrome macos

Phenomenon

When using the HTML5 Drag and Drop API with contenteditable elements, the behavior differs from standard elements. Dragging text within a contenteditable may not work as expected, and drop zones may not be recognized correctly.

Reproduction example

  1. Create a contenteditable div with draggable text inside.
  2. Try to drag text within the contenteditable.
  3. Try to drag text from outside into the contenteditable.
  4. Observe drag and drop event handling.

Observed behavior

  • In Chrome on macOS, drag and drop behavior is inconsistent in contenteditable.
  • Dragging text within contenteditable may not work.
  • Drop events may not fire correctly.
  • The default drag behavior may interfere with editing.

Expected behavior

  • Drag and drop should work consistently in contenteditable.
  • Events should fire correctly.
  • Default behavior should not interfere with editing.

Playground for this case

Use the reported environment as a reference and record what happens in your environment while interacting with the editable area.

Reported environment
OS: macOS 14.0
Device: Desktop or Laptop MacBook Pro
Browser: Chrome 120.0
Keyboard: US
Your environment

Use this editable area to reproduce the described case.

Event log
Use this log together with the case description when filing or updating an issue.
0 events
Interact with the editable area to see events here.