vuedraggable / sortablejs support files for cypress.io

commands.js

/// <reference types="Cypress" />
import draggable from './draggable'

// drag and drop a source element to a target selector, anchoring the drop to the given
// position of the selector. positions are the same as the cypress trigger command
Cypress.Commands.add('drop', { prevSubject: 'element' }, ($source, selector, position) => {
  cy.get(selector).then($target => {
    const source = $source[0]
    const target = $target[0]
    draggable(source, target, position)
  })
})

// moves an item to a given index in the same list
Cypress.Commands.add('move', { prevSubject: 'element' }, ($source, listSelector, itemsSelector, targetIndex) => {
  cy.get(listSelector).then($list => {
    const list = $list[0]
    const items = [].slice.call(list.querySelectorAll(itemsSelector))
    const item = $source[0]
    const currentIndex = items.findIndex(i => i === item)
    // if the target index is equal to the current index, do nothing
    if (targetIndex === currentIndex) return
    if (targetIndex === 0) {
      // if the target index is 0, move to the top of the drag area
      draggable(item, list, 'top')
    } else if (targetIndex === items.length - 1) {
      // if the target index is the last index, move to the bottom of the drag area
      draggable(item, list, 'bottom')
    } else if (targetIndex < currentIndex) {
      // if the target index is less than the current index, choose target - 1
      draggable(item, items[targetIndex - 1])
    } else if (targetIndex > currentIndex) {
      // if the target index is more than the current index, choose target + 1
      draggable(item, items[targetIndex + 1])
    }
  })
})

draggable.js

// adapted from: https://gist.github.com/superMDguy/f10d29b17ef0a473fb2700f3c72661cd
export default function draggable(source, target, positionOrOptions) {
  cy.wrap(source)
    .trigger('mousedown', { which: 1, button: 0 })
    .trigger('dragstart')

  cy.wrap(target)
    .trigger('dragover', positionOrOptions)
    .trigger('drop', positionOrOptions)
    .trigger('mouseup', { which: 1, button: 0 })
}

example.spec.js

/// <reference types="Cypress" />

context(`drag drop examples`, () => {
  it(`drag and move items`, () => {
    // load the test page
    cy.visit('my-test-page')

    // here is a selector for the draggable area
    // and another for the items within it
    const draggableArea = '.draggable'
    const draggableItems = '.draggable .item'

    // drop items into the target draggable area
    cy.get('.grab-handle[name=a]').drop(draggableArea, 'bottom')
    cy.get('.grab-handle[name=b]').drop(draggableArea, 'bottom')
    cy.get('.grab-handle[name=c]').drop(draggableArea, 'bottom')
    cy.get('.grab-handle[name=d]').drop(draggableArea, 'bottom')

    // current list state
    // a
    // b
    // c
    // d

    // here we want to swap item b with item c
    cy.get('.grab-handle[name=b]').move(draggableArea, draggableItems, 2)

    // current list state
    // a
    // c
    // b
    // d

    // here we want to move item a to the last position
    cy.get('.grab-handle[name=a]').move(draggableArea, draggableItems, 3)

    // current list state
    // c
    // b
    // d
    // a

    // here we want to move item d to the top
    cy.get('.grab-handle[name=d]').move(draggableArea, draggableItems, 0)

    // current list state
    // d
    // c
    // b
    // a
  })
})

example.vue

// not a real vue example. showing essentials for brevity.
const options = {
  handle: '.grab-handle',
  draggable: '.item'
}

const items = ['a', 'b', 'c', 'd']

<draggable class="draggable" element="div" :list="items" :options="options">
  <ul>
    <li class="grab-handle item" v-for="item in items"
      :name="item" :key="item">
      {{item}}
    </li>
  </ul>
</draggable>