Question

我最近开始使用HTML canvas，并且正在尝试构建类似绘画的应用程序。

到目前为止，我有一个canvas元素在其中绘制网格，并且正在使用 ondrag 事件实现PAN功能。一切正常，直到我在屏幕上添加了另一个元素。现在，即使包含画布的div是具有 draggable 属性的唯一元素，同级div（我认为默认情况下也不是dragabble）也显示了幻影图像，就像它被拖动时一样。画布。

我已经搜索了很多帖子，但是它们都提供了有关如何删除元素本身的重影的解决方案，但与同级元素无关。

这是我的HTML（我正在使用React btw）：

<div className="circuits">
    <div ref="toolbox" className="tool-box"></div> // This is moved with the canvas
    <div
      ref="canvasContainer"
      draggable={true}
      onDragStart={this.drawingArea.onDragStart}
      onDragOver={this.drawingArea.onDrag}
      className="canvas-container" >
      <canvas
        className="canvas"
        ref="myCanvas"
        >
      </canvas>
    </div>
  </div>

这是我的CSS（手写笔）：

.circuits
  height 100vh
  overflow hidden

  .canvas-container
    height 100%
    width 100%

  .tool-box
    position absolute
    width 100px
    height 100%
    background-color #d8d8d8
    box-shadow 1px 1px 17px -2px rgba(0, 0, 0, .25)

如果有人想看完整的内容，我也将代码推送到了GitHub：https://github.com/thiagoloddi/gatz

此外，我仅在Chrome中对此进行了测试，因此我不知道这是Chrome的特定行为还是其他浏览器也是如此。

无论如何，有人可以阐明如何防止这种情况吗？谢谢！

防止兄弟元素在拖动时出现鬼影

0 个答案: