why is drag drop not working as per expectation in cypress.io?

Question

I am trying to automate a simple drag and drop scenario on a website.

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 diffe.net 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 ie '@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 });

This code is valid for me. I think it is useful for you. You can try this.