Предотвратить братство элементов призрачного изображения при перетаскивании - PullRequest
Новая
       8

Предотвратить братство элементов призрачного изображения при перетаскивании

0 голосов
/ 11 сентября 2018

Я недавно начал работать с холстом HTML и пытаюсь создать приложение, подобное рисованию.

Пока у меня есть элемент canvas, где я рисую сетку, и я реализовывал функциональность PAN с помощью события ondrag . Все шло хорошо, пока я не добавил еще один элемент на экран. Теперь, несмотря на то, что div, содержащий холст, является единственным элементом со свойством draggable , родственный элемент div (который я считаю по умолчанию не перетаскиваемым по умолчанию) также показывает призрачное изображение, как если бы его перетаскивали с помощью холст.

Я уже искал много постов, но у них всех есть решения о том, как удалить призрачное изображение самого элемента, но ничего не связано с родственными элементами.

Это мой HTML (кстати, я использую React): 

<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 поведением, или другие браузеры также похожи на это.

В любом случае, кто-нибудь может дать понять, как это предотвратить? Спасибо!

...