Swappy container disables scrolling on mobile

[Hosfad]

Hello there, i have a container setup and the slot covers the whole screen on mobile, it seems like the slot disables scrolling the main page even after adding a data-swapy-handle

Here is the picture for refrence, here i have a data-swapy-handle and when i try to scroll on mobile the data-swapy-slot blocks it

Any ideas why this could be happening ?
Thank you

[TahaSh]

@Hosfad Thank you for opening this issue! This has been fixed in v0.2.0. Let me know if you have any questions!

[Hosfad]

Thank you very much, works good now

[GM2mars]

Hello,
I have the swapy version 1.0.2 and scrolling in the mobile browser does not work. I also use data-swapy-handle elements. Here is my structure (without styles):

<ul ref={containerRef}>
  {list.map((item, index) => (
    <li key={item.id}  data-swapy-slot={index}>
      <div data-swapy-item={item.id}>
        <div data-swapy-handle />
        {'Content'}
      </div>
    </li>
  )}
</ul>

Initial:

React.useEffect(() => {
    if (!containerRef.current) return;

    swapy.current = createSwapy(containerRef.current, {
      autoScrollOnDrag: true
    });

    swapy.current.onSwap((event) => {
     console.log(event.newSlotItemMap.asArray);
    });
    return () => swapy.current?.destroy();
  }, []);

What could be the problem?

[TahaSh]

@GM2mars Thanks for reporting this! It should now be fixed in v1.0.3.

[GM2mars]

I've upgraded to the latest version 1.0.3, thanks for the quick fix.
But I also noticed that if there is another element inside the data-swapy-handle element, such as an icon, then dragging stops working, or it works very unstable. I solved this problem by assigning a class to the child element "pointer-events-none" (tailwindcss). This helped to avoid the event being intercepted. I haven't looked at the library code, but maybe the problem is with the priority of the target and currenttarget.