Question

想要在SVG平面图中使用jquery将元素从模式弹出窗口拖放到div中。起初，我试图通过使用onclick函数创建矩形，但是现在的要求是拖动元素，并且应该在元素拖放时创建矩形。

例如，如果我拖动3x3元素，则应创建3X3大小的矩形。

我正在遵循的步骤

将从模态弹出窗口中拖动矩形的3x3元素
放入div时，应在div中创建3x3的矩形。

下面是HTML代码

    <%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeFile="MAPEditor.aspx.cs" Inherits="Builder_MAPEditor" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
      <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="../css/custombuildermain.css" rel="stylesheet" />

    <script>
        function abc(xyz) {
            document.getElementById('Iframe').contentWindow.FileLoad(xyz);
        }


        function SaveFile() {

            var iframe = document.getElementById("Iframe");
            var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

            //get svg element.
            var svg = innerDoc.getElementById("svgcontent");

            //get svg source.
            var serializer = new XMLSerializer();
            var source = serializer.serializeToString(svg);

            //add name spaces.
            if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) {
                source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
            }
            if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) {
                source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
            }

            document.getElementById("txtValue").innerText = source;
        }
    </script>
</head>
<body style="margin: 0px" >
    <form id="form1" runat="server">
        <div class="headwell">

        </div>

        <div>
            <img src="../Images/logo_horizontalbold1.png" class="headinglogo" />
            <textarea id="txtValue" runat="server" style="display: none"></textarea>
              <asp:Label ID="lblname" runat="server" Text="Floor Plan Builder" CssClass="lblheading"></asp:Label>

            <asp:Button ID="btnSave" runat="server" CssClass="btncustom" Text="Save" OnClientClick="SaveFile()" OnClick="btnSave_Click" />

            <input type="button" id="btnPreview" runat="server" visible="false" class="btncustom" style="left: 558px !important;" value="View" onclick="window.open('../Viewer/TESTEDITION2018/FPViewer.aspx');" />
            <iframe id="Iframe" src="../editor/NewEditorself.html"style="border:none; width:100%; height:700px;"></iframe>
        </div>
    </form>
</body>
</html>

下面是它的javascript代码

 ownrect.droppable = function () {
    //alert("hi");

}

btncre.droppable = function () {
    var element = SVG.get('landmarks-ground');
    var recwid = parseInt(document.querySelector("#recwid").value);
    var rechei = parseInt(document.querySelector("#rechei").value);
    var recx = parseInt(document.querySelector("#recx").value);
    var recy = parseInt(document.querySelector("#recy").value);
    var rectex = document.querySelector("#rectex").value;
    var autoincrementtext;

    if (typeof (Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount) + 1;
        } else {
            localStorage.clickcount = 1;
        }
        autoincrementtext = localStorage.clickcount;

    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }

    var group = element.group().id('test' + autoincrementtext).attr({ 'class': 'st0', 'opacity': 1, 'style': ' pointer-events: inherit;' });

    group.rect(recwid, rechei).move(recx, recy).attr({ 'fill': 'none', 'stroke': '#000000', 'stroke-width': 0.5,'style': 'pointer-events:inherit' });
    var text = group.plain(rectex).move(recx + 10, recy + 2).attr({ 'fill': '#000000', 'stroke': '#000000', 'stroke-width': 0, 'font-size': 6, 'font-family': 'serif', 'text-anchor': 'middle', 'xml:space': 'preserve', 'fill-opacity': 1, 'stroke-opacity': 1, });


}
btn3X3.droppable = function () {

    var element = SVG.get('landmarks-ground');
    var recwid = 30;
    var rechei = 30;
    var recx = 10;
    var recy = 10;
    var rectex = "Temp_";
    var autoincrementtext;

    if (typeof (Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount) + 1;
        } else {
            localStorage.clickcount = 1;
        }
        autoincrementtext = localStorage.clickcount;

    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }

    var group = element.group().id('test' + autoincrementtext).attr({ 'class': 'st0', 'opacity': 1, 'style': ' pointer-events: inherit;' });

    group.rect(recwid, rechei).move(recx, recy).attr({ 'fill': 'none', 'stroke': '#000000', 'stroke-width': 0.5, 'style': 'pointer-events:inherit' });
    var text = group.plain(rectex + autoincrementtext).move(recx + 15, recy + 2).attr({ 'fill': '#000000', 'stroke': '#000000', 'stroke-width': 0, 'font-size': 6, 'font-family': 'serif', 'text-anchor': 'middle', 'xml:space': 'preserve', 'fill-opacity': 1, 'stroke-opacity': 1, });

}

我无法删除元素，也无法创建矩形，尝试了可投放代码，但无法正常工作。

下面是我要放置元素的图像

enter image description here

下面是我将从中拖动元素的模式弹出窗口

enter image description here

使用jquery

0 个答案: