陣營可排序排序問題

正如你可以在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'} 
/>

來源

2017-07-03 Vanojx1

作爲使用絕對定位元素中，它需要的容器的引用可排序部件IM。添加getContainer道具解決了我的問題：

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

來源

2017-07-04 12:19:55 Vanojx1

陣營可排序排序問題

回答

相關問題