如何将 DOM 图像拖放到画布中

在本演示中，我们将演示如何将放置在画布外的 DOM 元素拖放到舞台上。

您看到的第一张图像是一个 DOM 图像。我们可以使用 HTML5 拖放来启用其拖动功能。

如果您需要在触摸设备上启用 DOM 元素的拖放，您将需要一些额外的步骤。有关更多信息，请参阅这里。

说明：将尤达拖放到画布中。

Konva Elastic Stars Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@9.3.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Drop DOM element Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }

      #container {
        background-color: rgba(0, 0, 0, 0.1);
      }

      p {
        margin: 4px;
      }

      #drag-items img {
        height: 100px;
      }
    </style>
  </head>

  <body>
    <p>Drag&drop yoda into the grey area.</p>
    <div id="drag-items">
      <img src="/assets/yoda.jpg" draggable="true" />
      <img src="/assets/darth-vader.jpg" draggable="true" />
    </div>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });
      var layer = new Konva.Layer();
      stage.add(layer);

      // what is url of dragging element?
      var itemURL = '';
      document
        .getElementById('drag-items')
        .addEventListener('dragstart', function (e) {
          itemURL = e.target.src;
        });

      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:
        stage.setPointersPositions(e);

        Konva.Image.fromURL(itemURL, function (image) {
          layer.add(image);

          image.position(stage.getPointerPosition());
          image.draggable(true);
        });
      });
    </script>
  </body>
</html>