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

[zzh1]

 <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>

[Xipirons]

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!

[zzh1]

Thank you for your reply, but there are still some issues 

When the ReactSortable component is in import {Modal} from '@ shopify/polaris'; The middle can be dragged, but in import {Modal, useAppBridge } from '@shopify/app-bridge-react'; Why is the middle not draggable 

The previous Modae was import {Modal as Modae, useAppBridge } from '@shopify/app-bridge-react'; To prevent conflicts, it has been changed now

<Modal id="my models" variant="max">

<ReactSortable

List={items}

Animation={200}

SetList={(newList)=>{

SetItems (newList);

}}

>

{items. map (item)=>（

<div key={item. id} style={width: "100%", height: "50px"}>

{item. name}

</div>

））}

</ReactSortable>

</Modal>cannot be dragged either