如何使用Sortable.js在React环境中实现跨列表的拖拽排序功能？请提供一个基础的代码示例。

Sortable.js是一个功能强大的JavaScript库，可以轻松实现列表或表格中的拖拽排序功能。当涉及到React框架时，我们通常需要使用Sortable.js与React的状态管理进行集成，以确保列表的重新渲染和状态同步。以下是如何在React中实现跨列表拖拽排序功能的基本步骤和代码示例：

参考资源链接：[使用Sortable.js实现JS拖拽排序](https://wenku.csdn.net/doc/55qt7yyy1j?spm=1055.2569.3001.10343)

首先，确保你已经安装了Sortable.js库，可以通过npm进行安装：

npm install sortables --save

然后，在React组件中，你可以创建两个列表，并为每个列表元素设置一个可以拖拽的`data sortable`属性。接着，使用Sortable.js的API初始化两个列表的拖拽排序功能。这里是一个基础的示例：

import React, { useState } from 'react';
import Sortable from 'sortables';

const App = () => {
  const [list1, setList1] = useState(['Item 1', 'Item 2', 'Item 3']);
  const [list2, setList2] = useState(['Item A', 'Item B', 'Item C']);

  const handleSort = (event) => {
    // 更新列表状态，这里的逻辑可能需要根据实际应用调整
    const items = Array.from(event.detail.el.children);
    const reorderedList = items.map(el => el.textContent);
    if (event.detail.from === '#list1') {
      setList1(reorderedList);
    } else {
      setList2(reorderedList);
    }
  };

  return (
    <div>
      <ul id=

参考资源链接：[使用Sortable.js实现JS拖拽排序](https://wenku.csdn.net/doc/55qt7yyy1j?spm=1055.2569.3001.10343)