← Back to library
Cypressselectorsintermediatev10+

Drag and drop

Simulate HTML5 drag-and-drop by triggering the underlying mouse events manually.

1it('drags a card to the done column', () => {
2  cy.visit('/kanban');
3
4  // Cypress has no native drag API — fire the underlying pointer events
5  cy.get('[data-testid="card-1"]')
6    .trigger('mousedown', { which: 1, force: true });
7
8  cy.get('[data-testid="column-done"]')
9    .trigger('mousemove', { force: true })
10    .trigger('mouseup',   { force: true });
11
12  cy.get('[data-testid="column-done"]')
13    .find('[data-testid="card-1"]')
14    .should('exist');
15});
#drag#drop#trigger#mousedown#mousemove