[Feature Request] Disable swapping if only 1 item exist

[Crinchy]

Hey 👋

Currently you can swap even only 1 item exist, which makes absolutely no sense for me and it would be ugly to wrap the swapy init into an if statement. So i would disable the swap if only 1 item exists in the container.

I hope you see it the same way as I do. ❤️

[TahaSh]

Hey @Crinchy! I might be wrong, but I think keeping it draggable would be the more expected behavior, especially in cases where you can add slots dynamically. It would indicate that the items in the section have a dragging feature. If you want to disable it when there’s one item, you can call swapy.enable(false) for that condition.

However, if most people prefer disabling it, I’m totally okay with that too! Thanks for the suggestion!

[Crinchy]

Okay @TahaSh makes sense for me.

But swapy.enable(false); is not working correctly on my side, i still can swap element if i disable it for test.

This is the React Component in my next.js project:

export default function TagListComponent({ tags }: { tags: PortfolioTagType[] }) {
  useEffect(() => {
    const container = document.querySelector('.container')!;

    const swapy = createSwapy(container, {
      animation: 'dynamic',
      continuousMode: true,
      swapMode: 'drop'
    });

    swapy.enable(false);

    swapy.onSwapEnd(async ({ data }) => {
      console.log(data);
    });

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

  return (
    <div className='container grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3'>
      {tags.map((tag) => (
        <div key={tag.uuid} data-swapy-slot={tag.uuid}>
          <div data-swapy-item={tag.uuid}>
            <TagEditDialog {...tag} />
          </div>
        </div>
      ))}
    </div>
  );
}

[TahaSh]

@Crinchy I found the issue. It was related to react's strict mode. I'll fix it soon, thanks!

[Crinchy]

Hey @TahaSh 👋,

any eta on this?

Thanks buddy

[TahaSh]

@Crinchy It should be fixed now :) (update to v0.4.0)

[Crinchy]

Thanks @TahaSh, yeah i can confirm it, its fixed ❤️