1. Events
  2. Swap End Event

When the user drops the item, even after multiple swaps, Swapy fires an event for that called swapEnd.

You can listen to that event using swapy.onSwapEnd().

swapy.onSwapEnd((event) => {
  console.log(event)
})

The event object contains the following:

  • slotItemMap: the new slot-to-item map after all swaps.
    • You can get it in three different formats: asArray, asObject, and asMap.
  • hasChanged: a boolean indicating whether the slot-to-item map changed after all the swaps.
    • It checks the final order of the items, not each individual swap. So, if items are swapped multiple times and return to their original slots, hasChanged will be false.

Event object example

swapy.onSwapEnd((event) => {
  console.log(event.slotItemMap.asObject)
  // {
  //   'foo': 'a',
  //   'bar': 'b',
  //   'baz': 'c'
  // }

  console.log(event.slotItemMap.asArray)
  // [
  //   { slot: 'foo', item: 'a' },
  //   { slot: 'bar', item: 'b' },
  //   { slot: 'baz', item: 'c' }
  // ]

  console.log(event.slotItemMap.asMap)
  // Map(3) {
  // 'foo' => 'a',
  // 'bar' => 'b',
  // 'baz' => 'c'
  // }

  console.log(event.hasChanged)
  // false
})

Demo

To see this event in action, use the demo below, open the dev console, and check the event object logged when the swapping session ends.

A
B
C
D