There is a conflict between the Modal and ReactSortable components and they cannot be dragged.

zzh1
Shopify Partner
1 0 0
 <Modaes id="my-modals" variant="max">
        <ReactSortable
            list={items}
            sort={true}
            animation={200}
            setList={(newList) => {
                setItems(newList);
            }}
        >
            {items.map((item) => (
                <div key={item.id} style={{ width: "100%", height: "50px" }}>
                    {item.name}
                </div>
            ))}
        </ReactSortable>
    </Modaes>
Reply 1 (1)

Xipirons
Shopify Partner
136 24 29

Hi @zzh1 

 

I don't know the context, I'd have to find out more,
But here's an improved version of your code + correction for the term "modal" (Modaes seems to be an error) :

 

<Modal id="my-modals" variant="max">
<ReactSortable
list={items}
setList={setItems}
animation={200}
>
{items.map((item) => (
<div key={item.id} style={{ width: "100%", height: "50px" }}>
{item.name}
</div>
))}
</ReactSortable>
</Modal>



The main changes:

1. Fixed the typo in the `Modal` component name (was `Modaes`).

2. Removed the `sort` prop as it's not a valid prop for `ReactSortable`. Sorting is enabled by default.

3. Simplified the `setList` prop to directly pass the `setItems` state setter function. This avoids the unnecessary arrow function.

4. Removed the `sort` prop as it's not a valid prop for `ReactSortable`. Sorting is enabled by default.

 

Some additional tips:

- Make sure the `items` state is properly initialized with an array of objects that have `id` and `name` properties.

- If you need to customize the sorting behavior, you can pass Sortable options as props to `ReactSortable`, like `group`, `animation`, `delay`, etc.

 

With these changes, your `ReactSortable` component should work as expected, allowing you to sort the list by dragging and dropping the items. The `items` state will be updated with the new order when the sorting changes.

 

Let me know if you have any other needs!

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed