React Konva 在拖动时更改 zIndex答案

【问题标题】：React Konva change zIndex on dragReact Konva 在拖动时更改 zIndex
【发布时间】：2019-07-31 01:53:59
【问题描述】：

嘿，所以我有一个用 React konva 编写的拖放游戏。我的可拖动部分看起来像这样（为方便起见进行了简化

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

我希望当前被拖动的部分是最高层（最高 zIndex）上的部分。

问题是 React-Konva 不支持 zIndexing，并且似乎希望您根据渲染方法中的顺序强制执行 zIndexing。

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

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

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

谁有好的解决方案？

【问题讨论】：

标签： konvajs react-konva konvajs-reactjs

【解决方案1】：

你应该只使用 moveToTop() 方法

 onDragStart={(el) => {el.target.moveToTop();}}

【讨论】：

【解决方案2】：

如果您有一个包含某些项目的数组，最简单的解决方案是更改该数组，方法是将拖动节点移动到数组的末尾。在您的 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
    });
};

演示：https://codesandbox.io/s/11j51wwm3

【讨论】：

这个问题是当我改变状态时，它会重绘并中断我的拖动事件。所以我需要再次点击该项目来拖动它
如果没有正确使用key属性或根本不使用，可能会中断拖拽事件。
如您所见，我制作的演示没有问题。
好吧，也许这是我代码中更深层次的问题，谢谢
确保以正确的方式使用key。这很重要。