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

Question

我正在使用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>
  );
}

Answer 1

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

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

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