React Konva change zIndex on drag

Question

Hey so I have little drag and drop game written in React konva. My draggable piece looks like this (simplified for convenience

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

I would like the piece that is currently being dragged to be the one on the highest layer (highest zIndex).

Problem is React-Konva does not support zIndexing, and seems to want you to enforce the zIndexing based on order in the render method.

My solution was to updated the reactState with a currentDragIndex

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

Then I try to reorder in the render method. However this causes the drag event to be interrupted.

Anyone have a good solution to this?

score 4 · Answer 1 · answered Jul 02 '19 at 02:39

4

You chould just use moveToTop() method

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

answered Jul 02 '19 at 02:39

Aylwin Nugroho

41
2

score 1 · Accepted Answer · answered Mar 09 '19 at 13:13

1

If you have an array of some items, the simplest solution is to change that array, by moving the dragging node to the end of the array. In your render function you just need to draw items from the array.

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

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

answered Mar 09 '19 at 13:13

lavrton

18,973
4
30
63

The problem with this is that when I change the state, it redraws and interrupts my drag event. So i need to click on the item again to drag it – Robert Lemiesz Mar 13 '19 at 00:31
It may be interrupted drag event if you don't use `key` property correctly or do not use it at all. – lavrton Mar 13 '19 at 23:08
As you can see there are no issues with the demo I made. – lavrton Mar 13 '19 at 23:08
Okay maybe it is an issue deeper in my code thank you – Robert Lemiesz Mar 14 '19 at 20:13
Make sure you use `key` in the correct way. That is important. – lavrton Mar 14 '19 at 23:39
Right and what is the correct way of using key. I basically set each item id as the key. – Robert Lemiesz Mar 21 '19 at 20:24

React Konva change zIndex on drag

2 Answers2