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>