Simple Example

A

B

C

D

First, you need to set the relationship between slots and items in your HTML. Each slot can only contain a single item.

To define a slot, set data-swapy-slot attribute on the element and give it a unique name (across slots).

Slot example:

<div data-swapy-slot="foo"></div>

To define an item, set data-swapy-item attribute on the element and give it a unique name (across items).

Item example:

<div data-swapy-item="bar"></div>

Note: you can use the same name for an item and a slot.

Example HTML:

<div class="container">
  <!-- Slot A -->
  <div data-swapy-slot="a">
    <!-- Item A -->
    <div data-swapy-item="a">
      <div>A</div>
    </div>
  </div>

  <!-- Slot B -->
  <div data-swapy-slot="b">
    <!-- Item B -->
    <div data-swapy-item="b">
      <div>B</div>
    </div>
  </div>

  <!-- Slot C -->
  <div data-swapy-slot="c">
    <!-- Item C -->
    <div data-swapy-item="c">
      <div>C</div>
    </div>
  </div>
</div>

Next, create a new Swapy instance for this container. You can have multiple Swapy instances per page by creating a new instance, using createSwapy(container), and specify the container element that contains slots and items.

import { createSwapy } from 'swapy'

const container = document.querySelector('.container')
const swapy = createSwapy(container, {
  // Your config options
})

There are several config options to customize your Swapy instance behavior. And you can listen to events, to implement your specific app’s use cases.