Swap Event

When the actual swap happens, whether on hover or drop, Swapy fires a swap event that you can listen to using swapy.onSwap() function.

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

The event object contains the following:

• newSlotItemMap: the new slot-to-item map after swapping.
  • You can get it in three different formats: asArray, asObject, and asMap.
• oldSlotItemMap: the old slot-to-item map before swapping.
  • You can get it in three different formats: asArray, asObject, and asMap.
• fromSlot: the id of the slot where the item was dragged from.
• toSlot: the id of the slot the item was dragged into.
• draggingItem: the id of the item being dragged.
• swappedWithItem: the id of the item it was swapped with.

Event object example

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

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

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

  console.log(event.fromSlot)
  // 'foo'

  console.log(event.toSlot)
  // 'bar'

  console.log(event.draggingItem)
  // 'b'

  console.log(event.swappedWithItem)
  // 'a'
})

Demo

To see this event in action, use the demo below, open the dev console, and check the event object logged during a swap.

A

B

C

D