Trabajando con elementos de drag and drop

Una cosa que me he dado cuenta probando es que las coordenadas del primer trigger pueden ser cualquiera, y en base a estas se calculan las del segundo trigger por ello es mas fácil simplemente poner un valor de 0 en ambas y en el segundo poner cuanto queremos que se desplace el elemento.

describe('Interactuando con drag and drops', () => {
  it('Interactuando con drag and drops', () => {
    cy.visit('https://demoqa.com/dragabble')
    cy.get('#dragBox')
      .trigger('mousedown', { which: 1, pageX: 0, pageY: 0 })
      .trigger('mousemove', { which: 1, pageX: 200, pageY: 200 })
      .trigger('mouseup')
  })
})

Esta combinacion de movimientos me ayudo a entender mejor como funcionan los dragabbles.

it.only('Interacting with drag and drop', () => {
    cy.visit('/dragabble')
    cy.get('#dragBox')
    .trigger('mousedown', {which:1, pageX:600, pageY:100}) // Selection
    .trigger('mousemove', {which:1, pageX:700, pageY:400}) // Movement
    .trigger('mousedown', {which:1, pageX:700, pageY:400}) // Selection
    .trigger('mousemove', {which:1, pageX:900, pageY:200}) // Movement
    .trigger('mouseup') // De-selection
  })

¡Rock 'n Roll! 🤟

it.only title:'Interactuando con drag and drop',config:function(){
   cy.visit('/dragabble')
    cy.get('#dragBox')
        .trigger('mousedown', {
           which:1,
            pageX:600,
            pageY:100,
       }).trigger('mousemove', {
           which:1,
           pagex: 100,
           pageY:600
      }).trigger(eventName:'mouseup')
})