Question

我有两个divcontainer。在第一个divcontainer（mapcontainer）中，我有一个地图作为画布。第二个divcontainer（baucontainer）包含外部SVG文件。现在我想把SVG文件从第二个divcontainer（baucontainer）拖放到第一个divcontainer（mapcontainer）中。画布是可缩放的，所以我必须通过拖动来改变高度和宽度。另外，拖放文件必须是子节点或节点。第二个divcontainer（baucontainer）中的SVG文件不允许删除。

我希望看到SVG-Object在移动时具有新的高度和宽度，而不是原始格式。

互联网上的某些人意味着可以使用d3.js执行此问题。

代码只是一个例子，但是有原始功能。

通过拖拽新的高度和宽度，我该怎么做才能看到SVG文件？

非常感谢!!

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Stadtaufbau</title>

    <style>

      [draggable=true]
      {
        cursor      : move;  
      }

      [draggable=false]
      {
        cursor      : not-allowed;
      }

      svg
      {
        display     : block;
        width       : 100px;
        height      : auto;
      }

      #hauptcontainer
      {
        position    : relative;
        width       : 500px;
        height      : 250px;
        margin      : -8px auto auto -8px;
        z-index     : 0;
      }

      #mapcontainer
      {
        position    : absolute;
        width       : 425px;
        height      : 250px;
        float       : left;
        border      : 1px solid black;
        z-index     : 1;
        overflow    : hidden;   
      }

      #mapcanvas
      {
        width       : 425px;
        height      : 250px;
      }

      #mapcontainer mapcanvas
      {
        top         : 1px;
        left        : 1px;
        z-index     : 2;
      }

      #baucontainer
      {
        position    : absolute;
        width       : 75px;
        min-height  : 250px;
        margin-top  : 0px;
        margin-left : 426px;
        border      : 1px solid black;
        z-index     : 3;
      }

      #baumenue
      {
        position    : absolute;
        width       : 75px;
        height      : 250px;
        overflow    : auto;
        padding     : 0px;
      }

      #baumenue img
      {
        height      : 50px;
        width       : 50px;
      }

      #bauscrollbar
      {
        position    : absolute;
        height      : 248px;
      }

    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery-ui.js"></script>
    <script>

      var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x

      var mapimg = new Image();
      mapimg.setAttribute("id", "Hauptcanvas");
      mapimg.setAttribute("src", "http://www.multidatasoft.de/map.jpg");

      var mapcanvas;
      var mapcanvasWidth;
      var mapcanvasHeight;
      var mapcontext;
      var mapoffsetX;
      var mapoffsetY;

      var windowcursorposX = 0;
      var windowcursorposY = 0;

      var Gebaeudenummer = "";

      var dragIcon = null;


      $(document).ready(function() 
      {
        mapcanvas        = document.getElementById("mapcanvas");
        mapcanvasWidth   = mapcanvas.width;
        mapcanvasHeight  = mapcanvas.height;
        mapcontext       = mapcanvas.getContext("2d");
        mapoffsetX       = $("#mapcanvas").offset().left;
        mapoffsetY       = $("#mapcanvas").offset().top;


        mapimg.onload = function(e)
        {
          mapcontext.drawImage(mapimg, 0, 0, 425, 250);
        };

      });

      function ziehen(event)
      {
        dragIcon = null;

        event.dataTransfer.effectAllowed = 'copymove';
        event.dataTransfer.dropEffect = 'copy';
        event.dataTransfer.setData('Text', event.target.id);

        Gebaeudenummer = event.target.id;

        dragIcon     = new Image();
        dragIcon.id  = "test";
        dragIcon.src = "http://www.multidatasoft.de/kleines_haus_" + Gebaeudenummer + ".svg";

        event.dataTransfer.setDragImage(dragIcon, 10, 10);

      }

      function ablegenErlauben(event)
      {
        event.preventDefault();
      }


      function ablegen(event)
      {
        event.preventDefault();

        windowcursorposX = (parseInt(event.clientX));
        windowcursorposY = (parseInt(event.clientY));

        mapcontext.drawImage(dragIcon, windowcursorposX, windowcursorposY, 25, 25);
      }

    </script>
  </head>

  <body>
    <main>
      <div id="hauptcontainer">
        <div id="mapcontainer" ondragover="ablegenErlauben(event)" ondrop="ablegen(event)">
          <canvas id="mapcanvas" class="mapcanvas">
            Entschuldigung, aber dein Browser unterstützt leider kein Canvas!
          </canvas>
        </div>
        <div id="baucontainer">
          <div id="baumenue" ondragover="ablegenErlauben(event)" ondrop="ablegen(event)">
            <img type="image/svg+xml" src="http://www.multidatasoft.de/kleines_haus_1.svg" alt="Computerbild" title="Computerbild &#10Holz: 10&#10Stein: 10&#10Gold: 10" draggable="true" ondragstart="ziehen(event)" id="1" />
            <img type="image/svg+xml" src="http://www.multidatasoft.de/kleines_haus_2.svg" alt="Computerbild" title="Computerbild &#10Holz: 10&#10Stein: 10&#10Gold: 10" draggable="true" ondragstart="ziehen(event)" id="2" />
            <img type="image/svg+xml" src="http://www.multidatasoft.de/kleines_haus_3.svg" alt="Computerbild" title="Computerbild &#10Holz: 10&#10Stein: 10&#10Gold: 10" draggable="true" ondragstart="ziehen(event)" id="3" />
            <img type="image/svg+xml" src="http://www.multidatasoft.de/kleines_haus_4.svg" alt="Computerbild" title="Computerbild &#10Holz: 10&#10Stein: 10&#10Gold: 10" draggable="true" ondragstart="ziehen(event)" id="4" />
            <img type="image/svg+xml" src="http://www.multidatasoft.de/kleines_haus_5.svg" alt="Computerbild" title="Computerbild &#10Holz: 10&#10Stein: 10&#10Gold: 10" draggable="true" ondragstart="ziehen(event)" id="5" />
            <img type="image/svg+xml" src="http://www.multidatasoft.de/kleines_haus_6.svg" alt="Computerbild" title="Computerbild &#10Holz: 10&#10Stein: 10&#10Gold: 10" draggable="true" ondragstart="ziehen(event)" id="6" />
            <img type="image/svg+xml" src="http://www.multidatasoft.de/kleines_haus_7.svg" alt="Computerbild" title="Computerbild &#10Holz: 10&#10Stein: 10&#10Gold: 10" draggable="true" ondragstart="ziehen(event)" id="7" />
            <img type="image/svg+xml" src="http://www.multidatasoft.de/kleines_haus_8.svg" alt="Computerbild" title="Computerbild &#10Holz: 10&#10Stein: 10&#10Gold: 10" draggable="true" ondragstart="ziehen(event)" id="8" />
            <img type="image/svg+xml" src="http://www.multidatasoft.de/kleines_haus_9.svg" alt="Computerbild" title="Computerbild &#10Holz: 10&#10Stein: 10&#10Gold: 10" draggable="true" ondragstart="ziehen(event)" id="9" />
            <img type="image/svg+xml" src="http://www.multidatasoft.de/kleines_haus_10.svg" alt="Computerbild" title="Computerbild &#10Holz: 10&#10Stein: 10&#10Gold: 10" draggable="true" ondragstart="ziehen(event)" id="10" />
          </div>
          <div id="bauscrollbar"></div>
        </div>
      </div>
    </main>
  </body>
</html>

如何通过从一个div容器拖放到另一个div容器来移动可伸缩的外部SVG文件？

0 个答案: