使用cypress-drag-drop插件无法实现拖拽，求配置说明及示例代码

专用配置项说明（除force外） #

• target：可选参数，可直接传入目标元素的JQuery对象或DOM元素实例，和直接传选择器的写法二选一即可，适合需要提前获取目标元素做判断的场景
• position：可选参数，定义拖拽落点相对于目标元素的位置，可选值为top/bottom/left/right/center，默认值为center，需要精准控制落点位置时可调整
• delay：可选参数，单位为毫秒，定义按下拖拽元素后到开始移动的等待时长，适配需要长按触发拖拽的交互逻辑
• document：可选参数，自定义触发拖拽事件的document对象，专门用于iframe内部元素的拖拽场景
• dataTransfer：可选参数，自定义拖拽事件携带的DataTransfer对象，适配需要传递自定义拖拽数据的第三方拖拽库

优化后的代码示例 #

你原有代码中包裹拖拽逻辑的then层是冗余的，可直接在获取到的拖拽元素上调用drag方法，以下是增加配置后的完整示例：

it.only('KDM: Should drag and drop Clinical Form section from the settings of the patient case', function () {
  cy.get('[href="/patient-case/7772/13391/settings"] > .MuiTab-wrapper').as('settings')
  cy.get('@settings').should('contain', 'Settings').click({force: true})
  cy.contains('Settings')
  cy.get('.MuiBox-root-382 > .MuiButtonBase-root > .MuiButton-label').click({force: true})
  cy.contains('Create template')
  cy.get('#name').clear().type(testTemplate).should('have.value', testTemplate)
  
  // 拖拽逻辑
  cy.get('[data-rbd-draggable-id="clinical_form"] > .MuiListItem-container > .MuiListItem-root > .MuiListItemText-root > .MuiTypography-root')
    .drag(':nth-child(2) > .makeStyles-column-441', {
      force: true,
      delay: 300, // 适配react-beautiful-dnd的拖拽触发逻辑，按需调整时长
      position: 'top' // 拖拽到目标列的顶部位置
    })
})

如果你的项目用的是react-beautiful-dnd这类拖拽库，增加100-500ms的delay配置基本可以解决绝大多数拖拽失效的问题。

内容的提问来源于stack exchange，提问作者Khalid Hafid-Medheb