Move the cursor (Drag and Drop)

I read the issue #386 but triggering the JavaScript events seem a bit complicated in some situation (when you don’t know the underlying code).

Use case

My goal is to assert a drag’n drop sorting library work as expected : http://grafikart.github.io/ReorderJS/index.html

Current behavior:

I can make my test pass with the electron browser but it will fail on chrome (nothing moves)

      cy.visit('http://grafikart.github.io/ReorderJS/index.html')
      cy.get('.column:eq(3)').as('toMove')
      cy.get('@toMove')
            .should('attr', 'data-position', '2')
            .trigger('mousedown')
      cy.get('.column:eq(2)').trigger('mousemove')
      cy.get('@toMove')
           .trigger('mouseup')
           .should('attr', 'data-position', '1')

How to reproduce:

You can produce a passing test on electron that fails on chrome with this simplified test (default resolution not changed : 1000 x 660)

    it('Should sort', function () {
      cy.visit('http://grafikart.github.io/ReorderJS/index.html')
      cy.get('.column:eq(3)')
        .should('attr', 'data-position', '2')
        .trigger('mousedown')
        .trigger('mousemove', {clientX: 500, clientY: 50})
        .trigger('mouseup')
        .should('attr', 'data-position', '1')
    })

[Ali-AlHalass]

Dear great community, i investigated the drag and drop functionality and noticed that it doesnt drop to the targets position. So when the cursor wants to drop it, it drops at the origin position where the element actual was. Workaround is to tell cypress to set all 3 position properties to the new position ->>> Like this for example :

   cy.get( selector )
    .trigger('mousedown', { button: 0 })
     .wait(1500)
     .trigger('mousemove', {
    clientX: 80,
      clientY: 90,
     screenX: 80,
    screenY: 90,
   pageX: 80,
     pageY: 90
     })
   .trigger('mouseup', { force: true });

I tried to set only on of them and it failed, tried only one property at a time.

IF you set ALL 3 properties, you will actual get this to work .

If this works for everybody, i recommend cypress team to add this to their documentation.

[josephgroark]

After too long of trying for me, here’s my solution. Use button 0, not 1, Force every click, don’t forget to click on the target element before mouseup. This will work for some not for others but I hope it helps!

cy.visit("/your-page");
    cy.get("yourSelector")
      .trigger("mousedown", { button: 0 }, { force: true })
      .trigger("mousemove", 200, -200, { force: true })
    cy.get("yourTargetForDrop").click()
      .trigger("mouseup", { force: true });