Реагируйте на изменение конвы zIndex при перетаскивании

Question

Привет, у меня есть небольшая игра с перетаскиванием, написанная на React konva. Мой перетаскиваемый фрагмент выглядит так (упрощен для удобства

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

Мне бы хотелось, чтобы кусок, который в данный момент перетаскивается, был на верхнем слое (самый высокий zIndex).

Проблема в том, что React-Konva не поддерживает zIndexing, и, кажется, хочет, чтобы вы применяли zIndexing на основе порядка в методе рендеринга.

Мое решение состояло в том, чтобы обновить responseState с текущим DragIndex

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

Затем я пытаюсь изменить порядок в методе рендеринга. Однако это приводит к прерыванию события перетаскивания.

У кого-нибудь есть хорошее решение для этого?

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
    });
};

Демо: https://codesandbox.io/s/11j51wwm3

Answer 2

Вы должны просто использовать метод moveToTop()

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