我一直在努力实现这个例子中提到react-sortable-hoc的例子页面，特别是与表内自动滚屏的行为。不幸的是，源代码看起来并不存在于存储库的示例目录中。

尽管我在下面的代码和框中实现的代码是一个非常简单的示例，但我已经为此倾注了数小时，使用useWindowAsScrollContainer和getContainer使用 refs，但似乎没有任何解决问题的方法。

也就是说，这是我注意到的行为：当滚动出容器，甚至出窗口时，自动滚动功能永远不会参与。我甚至使出回document.body与getContainer应限制容器，但似乎无法复制的行为所指出的资源库的例子。

此外，虽然我在SortableTable组件上指定了固定的高度和宽度<AutoSizer />，但理想情况下应该用 包裹，但暂时将其删除以消除任何副作用。

https://codesandbox.io/s/mysortabletable-zi94g?file=/MySortableTable.js

• react-sortable-hoc : 1.11.0
• 反应虚拟化：9.7.5

这个图书馆非常非常酷。我有以下问题：

我有多个列表，并且我希望能够在列表内以及列表之间进行拖放以重新排序。在下面的列表中，用户可以选择将合作伙伴移至列表内，或从一个列表移动到另一个列表。

默认情况下，项目只能在同一组件内拖动。如何创建一组可以作为彼此项目目标的组件？

应用程序.js

import React from 'react';
import './App.css';
import SortablePartner from './SortablePartner';

const priorityPartners = [
  "AwesomeTech",
  "Bazinga Software"
];

const medPartners = [
  "Zippy-Do",
  "SillySoft",
  "Samsonite"
];

const lowPartners = [
  "Acme Engineering",
  "Elbow Tech",
  "Rockets & Ricers"
];

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Prioritize Your Partners</h1>
      </header>
      <div className="SortableContainer">
        <SortablePartner priority="High" state={priorityPartners} />
        <SortablePartner priority="Medium" state={medPartners} />
        <SortablePartner priority="Low" state={lowPartners} />
      </div>
    </div>
  );
}

export default App;

SortablePartner.js

import React, {Component} …

我想将react-sortable-hoc与react-virtualized 的 MultiGrid 一起使用。更具体地说，我希望能够对右下方网格中的行进行排序。

第一次尝试

我正在创建一个 SortableMultiGrid 使用

const SortableMultiGrid = SortableContainer(MultiGrid, {
  withRef: true,
});

但是当这个安装时我收到一个错误，这个消息

无法读取未定义的属性“ownerDocument”

该错误源自SortableContainer的 componentDidMount 方法。

第二次尝试

我发现它SortableContainer有一个getContainer属性，它在抛出错误的代码上方被调用：

返回可滚动容器元素的可选函数。此属性默认为 SortableContainer 元素本身或（如果 useWindowAsScrollContainer 为 true）窗口。使用此函数指定自定义容器对象（例如，这对于与某些 3rd 方组件（如 FlexTable）集成很有用）。这个函数传递了一个参数（wrappedInstance React 元素），它应该返回一个 DOM 元素。

它是用 MultiGrid 组件实例调用的，但是当我尝试从中获取 DOM 节点时，它返回null：

getContainer={e => {
  const multiGrid = ReactDOM.findDOMNode(e);
  // multiGrid is null - I must return an HTMLElement
}}

我怀疑这可能是由尚未安装的 MultiGrid 组件引起的，我怀疑我所看到的与https://github.com/clauderic/react-sortable-hoc/issues/135相关。

第三次尝试 - 有效，但它是一个黑客 …

我正在尝试使用react-sortable-hoc 使我的表行可拖动。但我无法让它正常工作，有人可以解释我做错了什么吗？我的例子：https ://codesandbox.io/s/vibrant-cherry-dtkl5?file=/src/App.js

JSFiddle：https ://jsfiddle.net/40vpaLj5/

我用谷歌搜索了一些问题，我发现唯一消失的相关问题是当人们在模态上使用它时，他们谈到设置 z-index 来修复它。反正我试过了还是什么都没有。我怎样才能解决这个问题？

import React from 'react';
import PlaylistPages from './PlaylistPages';

class PlaylistSortableComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      test: [
        '1','2', '3', '4'
      ]
    }
  }

  render() {
    return (
      <PlaylistPages pages={this.state.test} style={{zIndex: 999999}} />
    );
  }
}   


const PlaylistPages = SortableContainer(({pages}) => {
  return (
    <div>
      {
        pages.map((page, index) =>
          <PlaylistPage key={index} page={page} style={{zIndex: 99999999}} />
      )}
    </div>
  );
});   

const PlaylistPage = SortableElement(({page}) => {
  return (
    <div style={{zIndex: …

我的问题是拖动时所选元素的样式丢失。我正在使用 react-sortable-hoc 库，它没有提供相关信息。他们的例子没有这个问题。样式始终与原始项目保持一致。

<tbody>
    {items.map((value, index) => (
    <SortableItem key={`item-${value.code}`} index={index} sortIndex={index} value={value} />
    ))}
</tbody>

const SortableItem = SortableElement(({value, sortIndex}) => (
        <tr>
            <DragHandle sortIndex={sortIndex}/>
            <td>{value.label}</td>
            <td>{value.beta.toString()}</td>
            <td>{value.prod.toString()}</td>
            <td>{value.hidden.toString()}</td>
        </tr>
    ));

        const DragHandle = SortableHandle(({sortIndex}) => <td>{sortIndex}</td>);

这是我选择并拖动元素之前的列表。

这是我选择并开始拖动第一个元素时的列表。

我在React.js中开发了一个项目，在其中我将react-sortable-hoc插件用于拖动元素。我想拖动带有输入的部分。

拖动之前看起来不错：

如果我拖动元素，它看起来像这样：

因此，拖动时输入，文本区域和所有表单元素中的样式都会丢失。

您能帮我为什么样式丢失以及如何解决吗？

谢谢。

这是react-sortable-hoc网页中的基本示例。

import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) =>
  <li>{value}</li>
);

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex), …