---
name: pw_drag_drop
kind: function
lang: ts
domain: browser
version: "1.0.0"
purity: impure
signature: "async (page: Page, opts: PwDragDropOptions) => Promise<void>"
description: "Simulates a human pointer drag in Playwright compatible with dnd-kit (PointerEvents + 8px activation threshold). Uses stepped mousemove with configurable pacing. Supports hoverMs for time-based dropzones (e.g. sidebar auto-open after 400ms hover)."
tags: [playwright, e2e, browser, drag]
uses_functions: []
uses_types: []
returns: []
returns_optional: false
error_type: "error_go_core"
imports: []
params:
  - name: page
    desc: "Playwright Page."
  - name: opts
    desc: "{source, target, steps?, delayMs?, hoverMs?, activateOffset?}. source/target accept selector string or Locator."
output: "void; performs full pointer drag from source center to target center."
tested: true
tests: ["happy path", "no source bbox throws", "no target bbox throws", "hoverMs adds wait", "string selectors resolve"]
test_file_path: "frontend/functions/browser/pw_drag_drop.test.ts"
file_path: "frontend/functions/browser/pw_drag_drop.ts"
---

## Ejemplo

```typescript
import { pw_drag_drop } from "./pw_drag_drop";

await pw_drag_drop(page, {
  source: "[data-card-id='abc']",
  target: "[data-column-id='xyz']",
  hoverMs: 500,
});
```

## Cuando usarla

Cuando necesites arrastrar un elemento en el browser durante un test e2e con Playwright y el target usa `@dnd-kit/core`. El `dragTo` nativo de Playwright emite eventos HTML5 drag que dnd-kit ignora; esta funcion usa la API de mouse raw con un movimiento de activacion inicial para cruzar el umbral de 8px de dnd-kit.

## Gotchas

- `playwright` es una peer dependency: debe estar instalada en el proyecto consumidor (`pnpm add -D playwright`). El registry no la instala.
- El umbral de activacion de dnd-kit es configurable en el `PointerSensor`; si el proyecto usa un umbral distinto al default de 8px, ajustar `activateOffset` (default: `{x: 12, y: 0}`) para superarlo.
- `steps` y `delayMs` controlan la suavidad del drag. Valores bajos (steps=5, delayMs=0) pueden hacer que dnd-kit no detecte el movimiento como drag en versiones antiguas; los defaults (20 steps, 16ms) simulan ~60fps.
- `hoverMs` es util para dropzones que se abren al mantener hover durante un tiempo (ej. sidebar de kanban que se abre tras 400ms). Pasarlo en 0 omite la espera.
- Los source/target deben ser visibles y tener bounding box; si no se encuentran (display:none, detached) la funcion lanza un error descriptivo.
- `activateOffset` es relativo al centro del source, no a su esquina.