javascript - 如何在柏树中拖放 ul > li 元素

Question

在系统中，自动化拖放功能需要考虑两个方面。一个叫做“时间表”的东西在 div 中，另一个在 ul > li 中。这是时间表 html 示例，

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

在测试脚本中，我使用这种方式拖拽如下，

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);

以上代码执行成功，元素按照我想要的方式拖放。

别人的html示例如下，

 <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>

在测试脚本中，我使用这种方式拖拽如下，

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");

但是最终上面的代码并没有执行成功。该元素未自动拖放。如果有人有解决此问题的想法，我们将不胜感激。

Answer 1

使用dataTransfer const，我们可以得到我们需要实现的；

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);