能够向上/向下移动表格行（拖放）

Question

我的表格有五列。正如您从示例https://codesandbox.io/s/sad-kilby-vgvp93中看到的那样，当您将光标悬停在任何行上时，该行会突出显示，并且第一列中会出现一个附加按钮。

我想添加向上或向下拖动行的功能。也就是说，当用户将鼠标悬停在一行上，然后将鼠标悬停在按钮（第一列中）上时，我希望用户能够向上或向下移动该列。

我在任何地方都没有找到类似的解决方案，我将非常感谢您的帮助

export default function App() {
  return (
    <table className="zui">
      <tbody style={{ fontSize: "40px" }}>
        {nodes.map((val, key) => (
          <tr key={key}>
            <td>
              <AppsIcon className="sss" />
            </td>
            <td
              style={{
                paddingLeft: "20px"
              }}
            >
              {val.name}
            </td>
            <td>{val.length}</td>
            <td>{val.hotkey}</td>
            <td>{val.isActivness}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

样式.css

    .sss {
  visibility: hidden;
}

tr:hover .sss {
  background: gray;
  visibility: visible;
}

tr:hover {
  background: gray;
  visibility: visible;
}

td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Answer 1

通过这段代码就可以实现。 ` 从 'react' 导入 React, { useState, useRef };

        const Table = () => {
            const dragItem = useRef();
            const dragOverItem = useRef();
            const [data, setData] = useState(
                [
                    {
                        "fullName": "Jhon",
                        "age": 26,
                    },
                    {
                        "fullName": "Doe",
                        "age": 24,
                    }
                ]
            )
            const dragStart = (e) => {
                dragItem.current = e.target.id;
            };
            const dragEnter = (e) => {
                dragOverItem.current = e.currentTarget.id;
            };
            const drop = () => {
                const copyListItems = [...data];
                const dragItemContent = copyListItems[dragItem.current];
                copyListItems.splice(dragItem.current, 1);
                copyListItems.splice(dragOverItem.current, 0, dragItemContent);
                dragItem.current = null;
                dragOverItem.current = null;
                setData(copyListItems);
            }

            const row = data.map((item) => {
                return (
                    <tr 
                        onDragEnter={(e) => dragEnter(e)}
                        onDragStart={(e) => dragStart(e)}
                        onDragEnd={drop}
                        draggable
                    >
                        <td>{item.fullName}</td>
                        <td>{item.age}</td>
                    </tr>
                )
            })

            return (   
                <>
                    <table>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Age</th>
                            </tr>
                        </thead>
                        <tbody>
                            {React.Children.toArray(row)}
                        </tbody>
                    </table>        
                </>
            )
        }
        export default Table

`