为什么在 cypress.io 中拖放不能按预期工作？

Question

我正在尝试在网站上自动化一个简单的拖放场景。

https://gojs.net/latest/samples/htmldragdrop.html

I am going as per the method provided in cypress doc

https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__drag-drop/cypress/integration/drag_n_drop_spec.js

my sample testcases is :

 cy.visit("https://gojs.net/latest/samples/htmldragdrop.html")
      cy.get('#paletteZone .draggable').first().trigger('mousedown', { which: 1 })
      .trigger('mousemove', { clientX: 500, clientY: 500 }) 
      .trigger('mouseup', { force: true })

After running the same :

cypress focussing on trigger mousedown the element i want to drag but on the step of mousemove -- nothing is happening when i check the same using "before" and "after" state . have tried differnet drop location just to ensure it was not related to x,y coordinate issue but in vain . please help

EDIT 1 : Able to drag-drop the same using a plugin available on cypress website itself i.e. '@4tw/cypress-drag-drop' . That worked like charm on the same website

  cy.get('#paletteZone .draggable').first().drag('canvas','center') 

but when i tried the same on different website (used it for testing purpose only , i am not owning the same ) , there is a prob with that plugin too. https://www.seleniumeasy.com/test/drag-and-drop-demo.html

  cy.visit("https://www.seleniumeasy.com/test/drag-and-drop-demo.html")
        //cy.viewport(1600, 800)
        cy.get('#todrag span').first().drag('#mydropzone','center')
        cy.get('#todrag span').first().drag('#mydropzone','center')
        cy.get('#todrag span').first().drag('#mydropzone','center')
        cy.get('#todrag span').first().drag('#mydropzone','center')

On actual Website , draggable items on left side are removed and are placed on right Side , but after running my code - althought items are getting added on right side but they are not getting removed from left div . Is there anything we need to add here ( IN my Screenshot - Draggagble 1 should not be present after code run )

Answer 1

const dataTransfer = new DataTransfer();
    cy.get('dragNodeSelector').trigger("dragstart", {
      dataTransfer,
    });
    cy.get('dropcontainer').trigger("drop", { dataTransfer });

该代码对我有效。我认为这对你有用。你可以试试这个。