如何在Cypress中实现按偏移量完成DnD拖拽操作？

要实现基于Y轴偏移的拖拽调整元素高度，你需要结合元素位置计算、dragover事件触发（多数React拖拽库依赖此事件识别拖拽过程），并通过clientX/clientY指定精确的拖拽终点坐标，而非依赖元素的相对偏移。

具体代码示例如下：

const dataTransfer = new DataTransfer();

cy.get(dragSelector)
  .then($el => {
    // 获取拖拽元素的视窗位置与尺寸
    const rect = $el[0].getBoundingClientRect();
    // 计算目标位置：X取元素水平中心，Y在元素顶部基础上下移20px
    const targetX = rect.left + rect.width / 2;
    const targetY = rect.top + 20;
    return { targetX, targetY };
  })
  .then(({ targetX, targetY }) => {
    // 触发拖拽开始事件
    cy.get(dragSelector).trigger('dragstart', {
      dataTransfer,
      force: true
    });

    // 触发拖拽移动事件（关键：多数拖拽组件需要此事件更新状态）
    cy.get('body').trigger('dragover', {
      clientX: targetX,
      clientY: targetY,
      dataTransfer,
      force: true
    });

    // 在目标坐标触发放置事件
    cy.get('body').trigger('drop', {
      clientX: targetX,
      clientY: targetY,
      dataTransfer,
      force: true
    });
  });

关键说明 #

1. 坐标计算：通过getBoundingClientRect()获取元素在视窗中的绝对位置，确保拖拽终点的准确性。如果拖拽目标是元素内的手柄（而非整个元素），需基于手柄元素的rect计算坐标。
2. dragover事件：很多React拖拽库（如react-beautiful-dnd）会监听dragover事件跟踪拖拽位置，省略此步骤会导致drop事件不被识别。
3. clientX/clientY：使用视窗绝对坐标而非元素相对偏移（offsetX/offsetY），能更精准控制拖拽终点，适配未知目标区域的场景。

内容的提问来源于stack exchange，提问作者Ivan Mjartan