当前位置：文江博客话题详情

赛普拉斯 - 拖动＆amp;滴 - 角CDK

发布于 01-23 05:45 字数 468 浏览 5 评论 0 原文

简单地实现了Angular CDK Drag＆amp;掉落，用柏树。具有所有包装的最新版本，所有问题＆amp;解决方案围绕着工作。

基本上，拖动＆amp;掉落夏娃。

用

即使在stackoverflow上的这个“解决”问题的答案如何实现柏树测试中的拖放？

，但无效。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

静水深流 2025-01-30 05:45:33

当我们发现问题时，我们设法找到解决方案。

简而言之，问题是，在最新版本中，Angular材料 - CDK阻止了屏幕阅读器的“拖放”，以供访问性。没关系，问题在于库 /解决方案已发布，它们被视为“屏幕读取器”，因为“按钮”为0。

在某些情况下，仅通过提供“按钮= 1”就足够了，但这不是我们的情况。

因为我们的情况是一个复杂的阻力＆amp;掉落的地方，您只能从“句柄”中拖动，并且在列表的区域中会受到限制（因此仅在Y轴上移动）这些解决方案将行不通。

唯一到目前为止对我们有用的最佳解决方案是以下一个：
使用柏树插件 cypress-real-events

const selectorForDraggingElementOrHanlde = 'whatever css selector u need'
const selectorWhereToDropTheElement = 'whatever other css selector u need'

cy.get(selectorForDraggingElementOrHanlde)
        .realMouseDown({ button: 'left', position: 'center' })
        .realMouseMove(0, 10, { position: 'center' });
cy.wait(200) // In our case, we wait 200ms cause we have animations which we are sure that take this amount of time
cy.get(selectorWhereToDropTheElement ).realMouseMove(0, 0, { position: 'center' }).realMouseUp();

When we found the problem, we manage to find the solution.

In a nutshell, the problem is that angular material - cdk, in latest versions, they are blocking the "drag and drop" from screen readers, for accessibility purposes. Which is ok, the problem is that the library / solutions posted, they were considered as "screen readers" as the "buttons" was 0 in the event.

In some of the cases, just by providing the "buttons = 1" would be enough, but that wasnt our case.

Because our case was a complex Drag & Drop where, you could only drag from the "handle" and you would be limited in the area of the list (so only move in Y axis) these solutions would not work.

The only & best solution that worked for US so far has been the following one:
Using the cypress plugin cypress-real-events

const selectorForDraggingElementOrHanlde = 'whatever css selector u need'
const selectorWhereToDropTheElement = 'whatever other css selector u need'

cy.get(selectorForDraggingElementOrHanlde)
        .realMouseDown({ button: 'left', position: 'center' })
        .realMouseMove(0, 10, { position: 'center' });
cy.wait(200) // In our case, we wait 200ms cause we have animations which we are sure that take this amount of time
cy.get(selectorWhereToDropTheElement ).realMouseMove(0, 0, { position: 'center' }).realMouseUp();

回复收藏 0 原文

你穿错了嫁妆 2025-01-30 05:45:33

mmonteirocl 提供的解决方案也对我来说也很好。其实现为自定义命令。

Cypress.Commands.add('dragAndDrop', (subjectSelector, targetSelector) => {
    cy.get(subjectSelector)
        .realMouseDown({ button: 'left', position: 'center' })
        .realMouseMove(0, 10, { position: 'center' });
    cy.get(targetSelector).realMouseMove(0, 0, { position: 'center' }).realMouseUp();
});

我在我们的命令中将

cy.dragAndDrop(subjectSelector, targetSelector);

The solution provided by mmonteirocl above worked perfectly for me as well. I implemented it as a custom command in our commands.js:

Cypress.Commands.add('dragAndDrop', (subjectSelector, targetSelector) => {
    cy.get(subjectSelector)
        .realMouseDown({ button: 'left', position: 'center' })
        .realMouseMove(0, 10, { position: 'center' });
    cy.get(targetSelector).realMouseMove(0, 0, { position: 'center' }).realMouseUp();
});

Then called it the test like:

cy.dragAndDrop(subjectSelector, targetSelector);

回复收藏 0 原文

沩ん囻菔务 2025-01-30 05:45:33

使用拖放占位符而没有任何其他库时，我可以正常工作。我不清楚为什么我必须这样写，但似乎有效。

cy.get(dragLocator)
  .trigger('mousedown', { button: 0, bubbles: true})
  .trigger('mousemove', { pageX: sourceX, pageY: sourceY })

cy.get('body')
  .trigger('mousemove', { pageX: sourceX, pageY: targetY })
  .trigger('mouseup', { button: 0, bubbles: true });

I got it working when using drag placeholder without any additional library. I'm not clear on why I have to write this way but it seems to work.

cy.get(dragLocator)
  .trigger('mousedown', { button: 0, bubbles: true})
  .trigger('mousemove', { pageX: sourceX, pageY: sourceY })

cy.get('body')
  .trigger('mousemove', { pageX: sourceX, pageY: targetY })
  .trigger('mouseup', { button: 0, bubbles: true });

回复收藏 0 原文

千紇 2025-01-30 05:45:33

这个具有角材料CDK拖动的工人

cy.get('.board-draggable-card') // draggable
            .trigger('mousedown', { button: 0, bubbles: true })
            .trigger('mousemove', { pageX: 10, pageY: 0 });

        cy.get('.board-cards-box') // droppable
        
            .trigger('mousemove', { position: 'center' })
            .trigger('mouseup', { button: 0, bubbles: true });

this worker for Angular material cdk drag and drop

cy.get('.board-draggable-card') // draggable
            .trigger('mousedown', { button: 0, bubbles: true })
            .trigger('mousemove', { pageX: 10, pageY: 0 });

        cy.get('.board-cards-box') // droppable
        
            .trigger('mousemove', { position: 'center' })
            .trigger('mouseup', { button: 0, bubbles: true });

回复收藏 0 原文

~没有更多了~