React Konva在拖动时更改zIndex

Question

嘿所以我用React konva写的小拖拽游戏。我的可拖动件看起来像这样（为方便起见，简化了

   return this.props.areas.map((area) => 
        <Image draggable=true 
            {...area.imageProps} 
            onDragStart={() => {...}} 
            onDragEnd={() => {...}} 
            onDragMove={() => {...}}/> ) 

我希望当前被拖动的片段成为最高层（最高zIndex）上的片段。

问题是React-Konva不支持zIndexing，并且似乎希望您在render方法中基于顺序强制执行zIndexing。

我的解决方案是使用currentDragIndex更新reactState

 ...<Image 
    onDragStart = {this.setState({currentDragIndex: area.index})} 
     />

然后我尝试在render方法中重新排序。但是，这会导致拖动事件被中断。

任何人都有一个很好的解决方案吗？

Answer 1

如果您有一些项目的数组，最简单的解决方案是通过将拖动节点移动到数组的末尾来更改该数组。在你的render函数中，你只需要从数组中绘制项目。

handleDragStart = e => {
    const id = e.target.name();
    const items = this.state.items.slice();
    const item = items.find(i => i.id === id);
    const index = items.indexOf(item);
    // remove from the list:
    items.splice(index, 1);
    // add to the top
    items.push(item);
    this.setState({
      items
    });
};

但是：Kua zxsw指出

Answer 2

你应该只使用moveToTop（）方法

https://codesandbox.io/s/11j51wwm3