Question

嘿，所以我几乎没有用React konva编写的拖放游戏。我的可拖动片段看起来像这样（为方便起见简化

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

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

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

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

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

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

有人对此有很好的解决方案吗？

Answer 1

如果您有一个包含某些项目的数组，最简单的解决方案是通过将拖动节点移动到数组的末尾来更改该数组。在<?php if(isset($_POST['update'])){ $categoryID = $_POST['categoryID']; } ?> <form class="add-new-post" method="post" action="load.php?categoryID=<?php echo $categoryID ?>" enctype="multipart/form-data"> Choose Category: <select name="categoryID" > <?php do { ?> <option value="<?php echo $editcat_rs['categoryID']; ?>"> <?php echo $editcat_rs['name']; ?></option> <?php } while ($editcat_rs=mysqli_fetch_assoc($editcat_query));?> </select> <button type="submit" class="btn btn-primary" name="update">Post</button> </form>函数中，您只需要从数组中绘制项目即可。

render

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

Answer 2

您应该只使用moveToTop（）方法

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

React Konva在拖动时更改zIndex

2 个答案: