Our pure JavaScript Scheduler component


Post by mats »

Most likely it's a poor implementation of drag drop you're using. I'd highly advise to take a look at our Siesta product instead for something that works well. You'd have to study our internals quite a bit so see all the variations of events fired during a drag drop. It's very complex.

Post by thorthor »

I believe that must be the case. Because it seems to work only in a really basic example.
I'll take a look at Siesta, thanks!

Post by thorthor »

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:
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
drag-and-drop.gif (2.97 MiB) Viewed 933 times

Post by Maxim Gorkovsky »

Thank you for contribution!

Post by thorthor »

No problem, happy to help!

Best,
Renato

Post Reply