反应可排序订购问题

Question

正如您在GIF中看到的那样，在列表中对项目进行排序时，占位符元素会被其他元素重叠。我的代码逻辑与example完全相同。

  

灰色背景是一个绝对定位的元素。

这是我的实际代码：

const DragHandleElement = SortableHandle(() => <span style={handleStyle} ><DragHandle /></span>);

const SortableItem = SortableElement(({content}) => {
  return (
    <div style={menuItemStyle}>
      <DragHandleElement />
      <div style={menuContentStyle}>
        {Utils.getMainDesc(content)}
      </div>
    </div>
  );
});

class VirtualList extends Component {
  render() {
    let {items} = this.props;

    return (
      <AutoSizer>
        {({ width, height }) => (
          <List
            ref={(instance) => {
              console.log(instance);
              this.List = instance;
            }}
            rowHeight={80}
            rowRenderer={({index}) => {
              let {content} = items[index];
              return <SortableItem key={'sort_item_'+index} index={index} content={content} />;
            }}
            rowCount={items.length}
            height={height}
            width={width}
          />
        )}
      </AutoSizer>
    );
  }
}

const SortableList = SortableContainer(VirtualList, {withRef: true});

<SortableList 
  ref={(instance) => {
    this.SortableList = instance;
  }}
  lockAxis='y'
  useDragHandle={true}
  items={menu.content}
  onSortEnd={({oldIndex, newIndex}) => this.props.onSortEnd(oldIndex, newIndex, this.SortableList)}
  helperClass={'higher'}
/>

Answer 1

由于我在绝对定位元素中使用可排序组件，因此需要对容器的引用。添加getContainer prop解决了我的问题：

<SortableList 
  ....
  getContainer={() => {
    return ReactDOM.findDOMNode(this.refs['menu'])
  }}
/>