Drag and drop with jquery ui sortable

• Operating System: Mac os
• Cypress Version: last version
• Browser Version: Chrome and Electron

Hello,

I’m trying to use Cypress to test a drag and drop sort (jquery ui sortable). It seems not working here. Is there an example? I tried this without success :

    cy.get(".grip").first().trigger('mouseover')
      .trigger('mousedown',  { which: 1 })
      .trigger('mousemove', {clientX: 600, clientY: 600})
      .trigger('mouseup', {force: true});

.grip is the handle. The parent (tr) is the draggable element.

Thanks

[pabloleone]

This worked for me:

  cy.get("#element")
    .then((el) => {
    const rect = el[0].getBoundingClientRect();
    const pageYDragAmount = 100;

    cy.window().then((window) => {
        const pageY = rect.top + window.pageYOffset;

        cy.wrap(el)
        .trigger("mousedown", {
            which: 1,
            pageX: rect.left,
            pageY,
            force: true,
        })
        .trigger("mousemove", {
            pageX: rect.left,
            pageY: pageY + pageYDragAmount,
            force: true,
        })
        .trigger("mousemove") // -- notice this new call
        .trigger("mouseup", {
            which: 1,
            force: true,
        });
    });
});

[chrisbreiding]

I experimented with this a bit and I think I’ve figured out what jQuery UI needs to simulate drag-n-drop. It requires pageX and pageY instead of the client* equivalents. It requires them for the mousedown as well as the mousemove and requires which: 1 for the mousemove. It should look like this:

cy.get(".grip").first()
  .trigger('mousedown', { which: 1, pageX: 600, pageY: 100 })
  .trigger('mousemove', { which: 1, pageX: 600, pageY: 600 })
  .trigger('mouseup');

You just need to make sure the pageX and pageY values actually line up with where your element is for mousedown and where you need it to be dropped for mousemove.