v0.2.0

This version introduces a simple and efficient way to create dynamic slots and items in your framework. (Example)

Features

manualSwap (Video Tutorial) (#45, #37, #34, #27, #20)

Swapy modifies the DOM during swaps behind the scenes. When using a framework that manages the DOM (like React), this can cause conflicts when dynamically adding or removing slots or items.

To resolve this, you can allow your framework to manage the swaps by using the manualSwap option. Here's an example written in React (though it should work with other frameworks too): https://github.com/TahaSh/swapy/blob/main/examples/react-dynamic/App.tsx

destroy (#41, #52)

Swapy now includes a destroy method for cleanup. Be sure to call it when a component is unmounted, as this is important for maintaining good performance.

React example:

useEffect(() => {
  const container = document.querySelector('.container')
  swapy = createSwapy(container)

  return () => {
    swapy.destroy()
  }
}, [])

Fixes

• Allow scrolling if the item has a handle (#47)

v0.1.2

• Support dynamic slots (#20, #27, #34, #37)
• Fix drag position after scroll (#26)

v0.1.1

Improve performance

v0.1.0

This version includes significant performance improvements, new features, and bug fixes.

Features

Continuous Mode (#7)

Continuous mode means that the item will be swapped as soon as it hovers over another slot. If it's disabled, the user has to stop moving the cursor over the slot to swap the elements. Continuous mode is enabled by default. You can disable it through the config object:

createSwapy(container, { continuousMode: false })

Improve performance for large datasets with data-swapy-exclude

You can now have items with hundreds of elements while maintaining the swapping animation at 60fps. If you have an item with a large dataset and notice some lag in the animation, you can disable the transition animation for some elements inside the items.

For example:

<div class="slot" data-swapy-slot="1">
  <div class="item" data-swapy-item="a">
    <div class="users">
      {users.map((user) => (
        <div class="user" data-swapy-exclude>
          <!-- user content -->
        </div>
      ))}
    </div>
  </div>
</div>

In this example, we're excluding the .user div. This will disable the transition animation for that div (including children) when swapping, allowing the swapping animation for its containers to remain smooth regardless of how many items the .user div contains.

As a rule of thumb, don't exclude elements unless you notice any lag when swapping elements.

Disable scale animation for text

For better performance, Swapy uses transform for animating the position and size of elements. This can sometimes cause the text to become distorted during the animation. You can fix this by specifying the elements that contain text using data-swapy-text.

For example:

<div class="header">
  <div class="title" data-swapy-text>
    Title
  </div>
</div>

Fixes

• Fix the issue where newly added items are not being picked up. (#13)
• Fix the issue of overriding user styles. (#4)

v0.0.6

• Update root element type in createSwapy to allow for null (#5)
• Passing null to createSwapy will throw an error.

v0.0.5

add README

v0.0.4

v0.0.4

v0.0.3

v0.0.3

v0.0.2

v0.0.2