Hi, I am trying to drag and drop elements from one div to other on https://letcode.in/sortable . So far i have tried "cypress-drag-drop' and 'cypress-real-events' plugins as well.

cy.get("#cdk-drop-list-0 div:first-child").drag("#cdk-drop-list-1", {force: true})

cy.get('#cdk-drop-list-0 div:first-child').realMouseDown({ button: "left" })
cy.get("#cdk-drop-list-1").realMouseMove(50, 50, { position: "center" })
cy.get("#cdk-drop-list-1").realMouseUp(50, 50, { position: "center" })

cy.get("#cdk-drop-list-0 div:first-child")
            .trigger("mousedown", { button: 0, force: true })
            .trigger("mousemove", 48, 586, { force: true })
            .trigger("mouseup", 48, 586, { force: true })
    })

On the debug window i can see the element being dragged but will not be dropped.

I've been trying your issue as well, without success. I think part of my issue is that the particular site you are using is throttled with ads that keep blocking my list. I haven't done any drag and drop previously but I will let you know if I'm able to get other examples to work.

Thank you. Drag and drop works with the "cypress-drag-drop" plugin on other example pages https://letcode.in/draggable and https://letcode.in/dropable .

I did a video a while ago about this

@some-cartoon-73108 will it work for this scenario https://discord.com/channels/755913899261296641/1108696607832158329 it's a slider though. You can find this component on https://codepen.io/bennettfeely/pen/ndwdGA

I am still facing same issue using the DataTransfer() method.

it.only("move element", () => {
        cy.visit('https://letcode.in/sortable');

        const dataTransfer = new DataTransfer();

        cy.get("#cdk-drop-list-0 div:first-child").trigger('dragstart', { dataTransfer })

        cy.get("#cdk-drop-list-1").trigger('drop', { dataTransfer }).then(() => {
            cy.wait(1000)
            cy.get("#cdk-drop-list-1").contains("Get to work")
        })


    })