Docs Cases Scenarios Playground Coverage

Caso ce-0083 · Escenario scenario-drag-drop-api

Drag and Drop API behavior differs in contenteditable

SO: macOS 14.0 Dispositivo: Desktop or Laptop MacBook Pro Navegador: Chrome 120.0 Teclado: US Borrador
drag-dropapichromemacos

Esta página aún no ha sido traducida

Actualmente se muestra el contenido original en inglés. Agradecemos su contribución a la traducción.

Contribuir a la traducciónVer original en inglés

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.