Swapy | A Javascript Lib to Drag to Swap Items In Any Framework

Swapy is a new Javascript library to make drag-and-drop to swap elements on the web page a breeze. It is framework-agnostic, and even works with Vanilla Javascript.

Swapy works in React, Vue, Svelte, Solid, Angular, Qwik, and even vanilla JS.

To experience the drag-and-drop to swap page items, check the lib website here .

Swapy is opensource and its code is on Github. Check it out here .

How to use swapy in vanilla javascript ? 🔗

install swapy 🔗

use your favorite package manager to install it. Like bun, npm, pnpm, yarn, .. I use pnpm.

pnpm install swapy

Or get it from a CDN like this.

<script src="https://unpkg.com/swapy/dist/swapy.min.js"></script>
<script>
  // You can then use it like this
  const swapy = Swapy.createSwapy(container)
</script>

using swapy 🔗

Below, I’m showing you a simple layout, but yours can be as complex as you want it to be.

Specify Slots and Items

1. To specify a slot, give its element data-swapy-slot="anyNameYouWant". Each slot can only contain a single item. Items are what you drag and drop.
2. To mark an element as an item, add this data attribute: data-swapy-item="anyNameYouWant".

By default, items are draggable from any spot. You can specify a handle by adding an element with data-swapy-handle (see content-b below).

You can customize the slot you are currently selecting by styling [data-swapy-highlighted] in your CSS.

<div class="container">
  <div class="section-1" data-swapy-slot="foo">
    <div class="content-a" data-swapy-item="a">
      <!-- Your content for content-a goes here -->
    </div>
  </div>

  <div class="section-2" data-swapy-slot="bar">
    <div class="content-b" data-swapy-item="b">
      <!-- Your content for content-b goes here -->
      <div class="handle" data-swapy-handle></div>
    </div>
  </div>

  <div class="section-3" data-swapy-slot="baz">
    <div class="content-c" data-swapy-item="c">
      <!-- Your content for content-c goes here -->
    </div>
  </div>
</div>

Get the container element that contains your slots and items, and pass it to createSwapy(). By default, it will use dynamic animation. You can change it using the animation config option.

import { createSwapy } from 'swapy'

const container = document.querySelector('.container')

const swapy = createSwapy(container, {
  animation: 'dynamic' // or spring or none
})

// You can disable and enable it anytime you want
swapy.enable(true)

Listening to Events 🔗

You can listen to swap events to do things like storing the new order. To make it more convenient for you, the swap event returns three versions of the new order: map, object, and array.

import { createSwapy } from 'swapy'

const container = document.querySelector('.container')

const swapy = createSwapy(container)

swapy.onSwap((event) => {
  console.log(event.data.object);
  console.log(event.data.array);
  console.log(event.data.map);

  // event.data.object:
  // {
  //   'foo': 'a',
  //   'bar': 'b',
  //   'baz': 'c'
  // }

  // event.data.array:
  // [
  //   { slot: 'foo', item: 'a' },
  //   { slot: 'bar', item: 'b' },
  //   { slot: 'baz', item: 'c' }
  // ]

  // event.data.map:
  // Map(3) {
  // 'foo' => 'a',
  // 'bar' => 'b',
  // 'baz' => 'c'
  // }
})

How to use swapy in React, Vue, or Svelte ? 🔗

• For React, check examples/react .
• For Vue, check examples/vue .
• For Svelte, check examples/svelte .

I heard about swapy lib from Theo’s video. Here is the video if you wanna watch it.

I hope you enjoyed reading this post as much as I enjoyed writing it. If you know a person who can benefit from this information, send them a link of this post. If you want to get notified about new posts, follow me on YouTube , Twitter (x) , LinkedIn , and GitHub .