Releases: TahaSh/swapy
v1.0.3
v1.0.2
v1.0.1
v1.0.0
I’m excited to announce that v1.0.0 is a complete rewrite of Swapy, with lots of new features, performance improvements, and bug fixes.
What's New:
- New Full Docs – Check out the new, detailed documentation to learn everything you need about Swapy.
- Minor API Tweaks – Some event objects have been updated for better consistency and clarity. Check out the events section to learn about them.
- Zero Dependencies – Swapy is now fully written in pure JS with no external dependencies (without Veloxi).
- New Config Options – Added dragOnHold, dragAxis, and enabled to give you more control over your setup.
- Non-Draggable Areas – You can now specify areas in your items that are not draggable. Check out no-drag attribute.
- Dynamic Updates – Use the new update method to refresh your Swapy instance dynamically as the DOM changes.
- Swap Control – Now you can easily enable or disable swaps dynamically with onBeforeSwap.
- Custom Drag Styling – Customize your drag item styles using the new [data-swapy-dragging] CSS selector.
- Easier Framework Integration – New utility functions to seamlessly integrate with frameworks and dynamically add/remove items.
- Dual Licensing – I’ve switched to a dual license model: GPLv3 and Commercial. Read more about the licensing.
I hope you find these updates useful! As always, feel free to reach out with feedback or questions.
v0.4.2
v0.4.1
v0.4.0
This version supports auto-scrolling while dragging.
Features
autoScrollOnDrag (#73)
Enabling autoScrollOnDrag in Swapy's config options will cause the page or container to auto-scroll when dragging an item near the edge.
createSwapy(container, {
autoScrollOnDrag: true
})Add hasChanged to swapEnd event (#58)
The swapEnd event object now includes a new parameter, hasChanged, which indicates whether any items were swapped during the drag session.
swapy.onSwapEnd(({ data, hasChanged }) => {
console.log(hasChanged);
console.log('end', data);
})Fixes
v0.3.1
v0.3.0
This version introduces swap modes and new swap events.
Features
swapMode (#53, #31)
Swapy now has 3 different swapping modes: hover, stop, and drop.
hover(default): swaps items as soon as you hover over slots.stop: swaps items when you hover over a slot and stop moving the cursor.drop: swaps the item when you drop it over a slot.
Example:
createSwapy(container, { swapMode: 'drop' })Note: Before this version, the stop mode was enabled by disabling continuousMode. It’s now recommended to use swapMode: 'stop' instead, as continuousMode will soon be deprecated.
New swap events (#58, #64)
swapy.onSwapEnd((event) => {}): fires when you drop the item. It will include the last slot items' order in the event.data object.
swapy.onSwapStart(() => {}): fires when you start dragging any item. It will only trigger once per dragging session.