How to drag and drop one div onto another in Cypress test using cypress-drag-drop package? - drag-and-drop

Question

I am trying to write a Cypress test that drags & drops column A onto column B on this webpage - https://the-internet.herokuapp.com/drag_and_drop
I installed the #4tw/cypress-drag-drop package & added the following to my support/commands.js:
require("#4tw/cypress-drag-drop");
Here is my Cypress code:
cy.get("#column-a").drag("#column-b", { force: true });
The test passes, but the columns aren't behaving the same way visually as it does when I manually drag column A onto column B.
Instead, this is what appears on the browser in Cypress Explorer:
As you can see, column A is greyed out, as if it were dragged, but not dropped
Can someone please point out what I'm doing incorrectly?

Answer 1

You cannot, the library does not support the correct events for this page.
But you can do it using Cypress commands.
These are the events used on the page
col.addEventListener("dragstart", handleDragStart, false);
col.addEventListener("dragenter", handleDragEnter, false);
col.addEventListener("dragover", handleDragOver, false);
col.addEventListener("dragleave", handleDragLeave, false);
col.addEventListener("drop", handleDrop, false);
col.addEventListener("dragend", handleDragEnd, false);
This is the test that passes
// check initial order
cy.get('div.column')
.then($cols => [...$cols].map(col => col.innerText.trim()))
.should('deep.eq', ['A', 'B'])
const dataTransfer = new DataTransfer;
cy.get("#column-a")
.trigger('dragstart', {dataTransfer})
cy.get("#column-b")
.trigger('dragenter')
.trigger('dragover', {dataTransfer})
.trigger('drop', {dataTransfer})
cy.get("#column-a")
.trigger('dragend')
// check new order
cy.get('div.column')
.then($cols => [...$cols].map(col => col.innerText.trim()))
.should('deep.eq', ['B', 'A'])
// check drag opacity reverted back
cy.get("#column-a").should('have.css', 'opacity', '1')
cy.get("#column-b").should('have.css', 'opacity', '1')