Support Forum
Hello Mats and Saki,
I did some further research and I managed to get this working so I thought I'd share if someone needs a similar solution in the future.
I looked at Siesta and it really was a thorough solution, but it would mean we use two e2e frameworks which would be a challenge at this time so I had to try digging deeper in the cypress' ways.
My first implementation was that the mousemove event is immediately dispatched on the "dropping element", without having intermediate mouse moves between the grabbed element, and therefore no movement was created. I browsed through the documentation, but could not pin-point a config that would prevent this kind of movement. Maybe something related to drag helper threshold https://www.bryntum.com/docs/scheduler/#Common/helper/DragHelper#config-dragThreshold ?
So, a working solution is that a "mousemove" event is first dispatched 1px from the original element and this way it detaches itself from the original position. After that, it can move freely.
Here's a working example:
I did some further research and I managed to get this working so I thought I'd share if someone needs a similar solution in the future.
I looked at Siesta and it really was a thorough solution, but it would mean we use two e2e frameworks which would be a challenge at this time so I had to try digging deeper in the cypress' ways.
My first implementation was that the mousemove event is immediately dispatched on the "dropping element", without having intermediate mouse moves between the grabbed element, and therefore no movement was created. I browsed through the documentation, but could not pin-point a config that would prevent this kind of movement. Maybe something related to drag helper threshold https://www.bryntum.com/docs/scheduler/#Common/helper/DragHelper#config-dragThreshold ?
So, a working solution is that a "mousemove" event is first dispatched 1px from the original element and this way it detaches itself from the original position. After that, it can move freely.
Here's a working example:
describe("Drag and drop", () => {
it("should drag and drop to another event", () => {
cy.visit("https://www.bryntum.com/examples/scheduler/basic/");
cy.get('[data-event-id="_generated_0x5e802f1"]')
.trigger("mousedown", { button: 0 })
.as("toDrag")
.then(($el) => {
const location = $el[0].getBoundingClientRect();
const newX = location.x + 1;
const newY = location.y + 1;
cy.get("@toDrag").trigger("mousemove", {
button: 0,
clientX: newX,
clientY: newY,
pageX: newX,
pageY: newY,
});
});
cy.get('[data-event-id="_generated_0x5e802f8"]')
.trigger("mousemove")
.trigger("mouseup", {
button: 0,
});
});
});
- Attachments
-
- drag-and-drop.gif (2.97 MiB) Viewed 933 times