Javascript Konva将元素从外部画布拖到舞台上

我有一个Konva舞台，目前展示了一系列的形状。我想有一个形状面板，在那里我可以拖动形状并插入到画布中

目前有两种方法可以做到这一点：

将“形状”面板添加到Konva stage作为其自己的层和实体

将“形状”面板作为Konva stage之外的独立HTML元素，并实现可拖动的js库来处理拖动行为

我宁愿选择2；现在，能够用CSS设计形状面板的样式并产生许多其他与DOM相关的好处对我来说更具吸引力

我对拖拽行为进行了排序，但有一个问题：即使我实现了stage

mouseover

events，但将一个源于画布外部的元素拖拽到画布顶部实际上并不会触发stage事件侦听器

有办法解决这个问题吗

---

有趣的是，如果您在元素外单击并按住鼠标，然后将鼠标悬停在画布上，事件侦听器就会启动。但是，当您实际拖动一个元素（文本、图像）时，事件侦听器不会触发…

看看这个演示：

---

鼠标事件上的好点，无需单击形状。由此看来，您的可拖动JS库可能正在取消DOM事件的气泡效应。你在用什么图书馆？这里是关于将形状面板拖到画布上的前一个问题，虽然它使用了列表中的选项1，但可能会有一些用处。

var con = stage.container();
con.addEventListener('dragover', function(e) {
  e.preventDefault(); // !important
});

con.addEventListener('drop', function(e) {
  e.preventDefault();
  // now we need to find pointer position
  // we can't use stage.getPointerPosition() here, because that event
  // is not registered by Konva.Stage
  // we can register it manually (with private method):
  stage.setPointersPositions(e);

  // now you can add a shape. We will add an image

  Konva.Image.fromURL('/assets/yoda.jpg', function(image) {
    layer.add(image);

    image.position(stage.getPointerPosition());
    image.draggable(true);

    layer.draw();
  });
});