Drag and drop is not working

[Poojitha-Chandra]

I am using this plugin for a while and from mid July it stopped working, so I have got some cypress drag and drop example from web and tried to check whether it is an issue with my client network.

The example used for which assertion error occurs as drag-drop plugin not working:

it('Using the cypress-drag-drop plugin on a HTML site', function () {

        cy.visit('https://the-internet.herokuapp.com/drag_and_drop')

        //Before Drag and Drop column-a has 'A' and 'column-b' has 'B'
        cy.get('#column-a')
            .should('have.text', 'A')
        cy.get('#column-b')
            .should('have.text', 'B')

        //Drag and drop using cypress-drag-drop plugin
        cy.get('#column-a').drag('#column-b')

        //After Drag and Drop column-a has 'B' and 'column-b' has 'A'
        cy.get('#column-a')
            .should('have.text', 'B')
        cy.get('#column-b')
            .should('have.text', 'A')
 })

The alternative code without using drag and drop plugin is working fine. The code for the same:

it('Not using the cypress-drag-drop plugin on a HTML site', function () {

        cy.visit('https://the-internet.herokuapp.com/drag_and_drop')

        const dataTransfer = new DataTransfer();

        //Before Drag and Drop column-a has 'A' and 'column-b' has 'B'
        cy.get('#column-a')
            .should('have.text', 'A')
        cy.get('#column-b')
            .should('have.text', 'B')

        //Not using cypress-drag-drop plugin
        cy.get('#column-a').trigger('dragstart', { dataTransfer });
        cy.get('#column-b').trigger('drop', { dataTransfer });

        //After Drag and Drop column-a has 'B' and 'column-b' has 'A'
        cy.get('#column-a')
            .should('have.text', 'B')
        cy.get('#column-b')
            .should('have.text', 'A')
 })

Cypress version used in my machine is 12.15.0

@bierik Any help is highly appreciated as the alternative way without using plugin is not working for my test URLs

[davidlinhares]

Seeing the same behavior since mid July as well.

Cypress version 12.17.1.

[gripzyyy]

Problems still!

[jeme95]

@Poojitha-Chandra
I had the same problem and your code worked for me, thank you very much

[jmescode-te]

@Poojitha-Chandra thanks so much! all I did was change some styles in my drag/drop interface but I couldn't get the drag tests that usually worked, to work. Your comment however, got all my tests working again :)

[mohamadnoor991]

@Poojitha-Chandra, I have the same problem, and I opened an issue for that; actually, it will work with you, but you should hover the mouse on the place where you want to drop the element.

the code that you added, worked with me when I tried to drop an image from my PC to the application, but when I tried it with an element from the application to drop from list to place inside the app, it did not work. do you have any idea what can be the problem??

[pv-das]

@Poojitha-Chandra, I am still facing the issue

[chandhiny]

i tried different ways to simulate the drag and drop, it is not working and the UI is built with react dnd