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

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

jquery html canvas svg

Jquery 如何通过拖放将可缩放的外部SVG文件从一个div容器移动到另一个div容器？,jquery,html,canvas,svg,drag,Jquery,Html,Canvas,Svg,Drag,我有两个箱子。在第一个divcontainer（mapcontainer）中，我有一个作为画布的地图。第二个divcontainer（baucontainer）包含外部SVG文件。现在我想将SVG文件从第二个divcontainer（baucontainer）拖放到第一个divcontainer（mapcontainer）中。画布是可伸缩的，所以我必须通过拖动来更改高度和宽度。另外，拖放文件必须是子文件或节点。不允许删除第二个divcontainer（baucontainer）中的SVG文件我

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

我希望在移动SVG对象时看到新的高度和宽度，而不是原始格式

互联网上的一些人表示，可以使用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>


斯塔德托夫堡
[draggable=true]
{
光标：移动；
}
[draggable=false]
{
光标：不允许；
}
svg
{
显示：块；
宽度：100px；
高度：自动；
}
#船头集装箱
{
位置：相对位置；
宽度：500px；
高度：250px；
裕度：-8px自动-8px；
z指数：0；
}
#地图容器
{
位置：绝对位置；
宽度：425px；
高度：250px；
浮动：左；
边框：1px纯黑；
z指数：1；
溢出：隐藏；
}
#地图画布
{
宽度：425px；
高度：250px；
}
#mapcontainer mapcanvas
{
顶部：1px；
左：1px；
z指数：2；
}
#包扎器
{
位置：绝对位置；
宽度：75px；
最小高度：250px；
边际上限：0px；
左边距：426px；
边框：1px纯黑；
z指数：3；
}
#鲍梅努埃
{
位置：绝对位置；
宽度：75px；
高度：250px；
溢出：自动；
填充：0px；
}
#鲍米努伊姆格
{
高度：50px；
宽度：50px；
}
#滚动条
{
位置：绝对位置；
高度：248px；
}
var mouseweelevt=（/Firefox/i.test（navigator.userAgent））？“DOMMouseScroll”：“mousewheel”//FF从FF3.x起无法识别mousewheel
var mapimg=新图像（）；
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；
$（文档）.ready（函数（）
{
mapcanvas=document.getElementById（“mapcanvas”）；
mapcanvasWidth=mapcanvas.width；
mapcanvasHeight=mapcanvas.height；
mapcontext=mapcanvas.getContext（“2d”）；
mapoffsetX=$（“#mapcanvas”）.offset（）.left；
mapoffsetY=$（“#mapcanvas”）.offset（）.top；
mapimg.onload=函数（e）
{
drawImage（mapimg，0,0425250）；
};
});
函数ziehen（事件）
{
dragIcon=null；
event.dataTransfer.effectAllowed='copymove'；
event.dataTransfer.dropEffect='copy'；
event.dataTransfer.setData（'Text'，event.target.id）；
Gebaeudenummer=event.target.id；
dragIcon=新图像（）；
dragIcon.id=“测试”；
dragIcon.src=”http://www.multidatasoft.de/kleines_haus_“+Gebaeudenummer+”.svg”；
事件.dataTransfer.setDragImage（dragIcon，10,10）；
}
函数（事件）
{
event.preventDefault（）；
}
功能（事件）
{
event.preventDefault（）；
windowcursorposX=（parseInt（event.clientX））；
windowcursorposY=（parseInt（event.clientY））；
drawImage（dragIcon，windowcursorposX，windowcursorposY，25,25）；
}
恩特舒尔迪贡，阿伯·邓恩·布朗斯特·莱德·基恩画布！