无法在fabricjs中捕获拖动事件

Question

我正在尝试将外部 div 放到 fabricjs 画布中。我知道有一个答案Drag and Drop into Fabric.js canvas，但它对我不起作用。

这是我想做的基本事情：

  let canvasContainer = document.getElementById('canvas')

  canvasContainer.addEventListener('dragenter', this.onDragEnter, false);
  canvasContainer.addEventListener('dragover',  this.onDragOver, false);
  canvasContainer.addEventListener('dragleave', this.onDragLeave, false);
  canvasContainer.addEventListener('drop',      this.onDrop, false);

但是事件处理程序没有被执行。

我注意到非常重要的事情：当我检查 DOM 时，我发现有两个画布：一个带有 canvas lower-canvas，另一个带有 canvas upper-canvas 类。

只有lower-cavas 具有id="canvas" 属性。当我（通过网络检查器手动删除）upper-canvas div 时，事件处理程序确实被执行了。

生成的 HTML 标记如下所示：

<div class="canvas-container" style="width: 663px; height: 663px; position: relative; user-select: none;">
   <canvas data-v-346adb42="" id="canvas" class="canvas lower-canvas" width="1326" height="1326" style="position: absolute; width: 663px; height: 663px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
   <canvas class="upper-canvas canvas" width="663" height="663" style="position: absolute; width: 663px; height: 663px; left: 0px; top: 0px; touch-action: none; user-select: none; cursor: default;"></canvas>
</div>

我不确定为什么有两个画布。即使我不删除上部画布，我仍然会得到绿色的加号，就像我的 div 已准备好被删除一样。

Answer 1

要绑定事件列表，请使用canvas.on(event,handler)。

演示

var canvas = new fabric.Canvas('canvas')

canvas.on('dragenter', onDragEnter, false);
canvas.on('dragover',  onDragOver, false);
canvas.on('dragleave', onDragLeave, false);
canvas.on('drop',      onDrop, false);

function onDragEnter() {
  console.log('onDragEnter')
}

function onDragOver() {
  console.log('onDragOver')
}

function onDragLeave() {
  console.log('onDragLeave')
}
function onDrop() {
  console.log('onDrop')
}

#canvas {
  background-color: green;
}

#draggable {
  width: 100px;
  height: 100px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<div id="app">
  <canvas id="canvas" width=200 height=200></canvas>
  <div id="draggable" draggable="true">
  </div>
</div>

这里更新fiddle。