How to drag and drop ul > li elements in cypress

Question

In the system, there are two areas to be considered in automating drag and drop functionality. One thing which called "timesheet" is in the div and another one is in ul > li. Here is the timesheet html sample,

<div class="time-update__top-block">

In the test scripts, I used this way to drag and drop as follows,

cy.get(".time-update-block", { timeout: 60000 })
      .trigger("mousedown", { force: true })
      .wait(2000);
    cy.get(
      '.anotherElement',
      { timeout: 60000 }
    )
      .trigger("mousemove", { force: true }, "topLeft")
      .wait(2000);
    cy.get(
      '.anotherElement',
      { timeout: 60000 }
    )
      .trigger("mouseup", { force: true }, "topLeft")
      .wait(2000);

Above code was executed successfully and the element was dragged and dropped in the way I wanted.

Other one's html sample as follows,

 <ul class="schedule-movie-list">
    <li class="undefined schedule-movie-list__item " title="Drag me!" draggable="true">Name1</li>
    <li class="undefined schedule-movie-list__item " title="Drag me!" draggable="true">Name2</li>
    <li class="undefined schedule-movie-list__item " title="Drag me!" draggable="true">Name3</li></ul>

In the test scripts, I used this way to drag and drop as follows,

cy.get(".schedule-movie-list > .schedule-movie-list__item", {
      timeout: 60000
    })
      .eq(1)
      .click()
      .trigger("mousedown", { force: true });

    cy.get(
      '.anotherElement2',
      { timeout: 60000 }
    ).trigger("mousemove", { force: true }, "topLeft");
    cy.get(
      '.anotherElement2',
      { timeout: 60000 }
    ).trigger("mouseup", { force: true }, "topLeft");

But eventually above code was not executed successfully. The element was not dragged and dropped automatically. If anyone has an idea to resolve this highly appreciated.

Answer 1

Using dataTransfer const, we can get what we need to achieve;

describe("Main Page", () => {
  const dataTransfer = new DataTransfer;
  it("Drag & Drop elements", () => {
      cy.get('.schedule-movie-list > .schedule-movie-list__item')
        .first()
        .trigger('dragstart', { dataTransfer });

      cy.get(schedulerPerformancePanel)
        .first()
        .trigger('drop', { dataTransfer })
        .wait(3000);