使用 react-sortable-hoc 在 xy 轴上对网格进行排序答案

【问题标题】：Sorting the grid in xy axis using react-sortable-hoc使用 react-sortable-hoc 在 xy 轴上对网格进行排序
【发布时间】：2021-09-16 17:08:33
【问题描述】：

我正在使用 react-sortable-hoc 拖放元素网格。对我来说，如果它是单列，它就可以正常工作。但如果它是多列（网格），则无法按预期工作。不知道我做错了什么。实时代码示例在下面的链接https://stackblitz.com/edit/react-qfqmnp?file=src/App.js

import React, { useState, useEffect } from 'react';
import './style.css';
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move';

const list = [
  'Item 1',
  'Item 2',
  'Item 3',
  'Item 4',
  'Item 5',
  'Item 6',
  'Item 7',
  'Item 8',
  'Item 9',
  'Item 10',
  'Item 11',
  'Item 12',
  'Item 13',
  'Item 14',
  'Item 15',
  'Item 16',
  'Item 17',
  'Item 18'
];

const SortableListItem = SortableElement(({ item }) => {
  return <li className="list-group-item"> {item} </li>;
});

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul className="list-group">
      {items.map((item, index) => {
        return (
          <SortableListItem axis="xy" key={index} index={index} item={item} />
        );
      })}
    </ul>
  );
});

export default function App() {
  const [items, setItems] = useState(list);

  const onSortEnd = ({ oldIndex, newIndex }) => {
    setItems(arrayMove(items, oldIndex, newIndex));
  };

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <SortableList items={items} onSortEnd={onSortEnd} />
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs react-sortable-hoc

【解决方案1】：

为了在网格中拖动，您必须编写一些 CSS 以使 UI 看起来像网格，然后在 SortableList 中您必须传递 axis={'xy'} 之类的

<SortableList axis={'xy'} items={items} onSortEnd={onSortEnd} />

你可以在这里查看工作代码Running Sample

【讨论】：