Question

我有一个HTML页面形式的程序，其中包含draggable / droppable元素和contenteditable元素。有没有办法保存元素的位置以及可疑文本？每种类型的元素可能有超过一百种，我无法预先制作它们的ID，因为它们是在单击按钮时生成的。我已经研究过使用localStorage但是没有发现任何与我的问题有关的内容。它必须是一个简单的解决方案，我可以适用于所有事情。

这是我缩短的HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        <style>
            td {
                border: 1px solid black;
            }
            .tile {
                cursor: move;
                min-width: 48px;
                width: fit-content;
                height: 24px;
                background-color: red;
                border: 1px solid black;
            }
        </style>
    </head>

    <body>
        <button id="addTileButton">Click to add tile</button>
        <div contenteditable="true" id="tableDiv">
            <table cellspacing="0" border="0">
                <colgroup width="509"></colgroup>
                <colgroup span="5" width="166"></colgroup>
                <tr>
                    <td height="32" align="left" valign=bottom><b><font face="Cambria">State Name</font></b></td>
                    <td align="left" valign=bottom><b><font face="Cambria">GA (P)</font></b></td>
                    <td align="left" valign=bottom><b><font face="Cambria">C.3</font></b></td>
                    <td align="left" valign=bottom><b><font face="Cambria">ExCom</font></b></td>
                    <td align="left" valign=bottom><b><font face="Cambria">HRC</font></b></td>
                    <td align="left" valign=bottom><b><font face="Cambria">SC</font></b></td>
                </tr>
                <tr>
                    <td height="32" align="left" valign=bottom>Afghanistan</td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                </tr>
                <tr>
                    <td height="32" align="left" valign=bottom>Albania</td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                </tr>
                <tr>
                    <td height="32" align="left" valign=bottom>Algeria</td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                </tr>
                <tr>
                    <td height="32" align="left" valign=bottom>Andorra</td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                </tr>
            </table>
        </div>
    </body>
</html>

这是我的JavaScript：

$(document).ready(function() {
    $("#addTileButton").click(function() {
        $("body").append("<div id=draggable></div>");
        var tile = $("<div class=tile contenteditable=true></div>");
        $("#draggable").append(tile);
        $(".tile").draggable().resizable();
        $("#tableDiv").droppable();
        $("<td>").resizable();
    });
});

欢迎提出任何建议。

提前致谢！

Answer 1

有三种方法可以做到这一点。 1）将用户进行了更改的整个html保存为模板。这不建议用作while saving页面，可以注意到某些information is lost。

2）保存whole html structure of the div which you need in a javascript variable并将其存储在数据库中。需要时从服务器获取它并按原样显示它，只需将parentDiv的innerHtml设置为从服务器获取的数据。

3）我个人更喜欢的方法。 Save the state of your html div in a JSON format（information like width, height, positions, images of divs等）。将其存储在数据库中。现在创建rest API并在需要时获取JSON数据。解析它并在需要时显示它。一个更清洁的方法！

Answer 2

执行此操作的最佳方法是将每个对象的状态保存在json上并将其保存在数据库中。因此，在rest api的帮助下，您可以获取数据并从您创建的相同状态json重建所有内容。

已修改 所以我在类似项目中所做的就是获取所有html属性数据，如宽度，高度，位置x和y等，并将其存储在像

这样的对象上

    "input1": {
      "text": "Hello",
      "placeholder": "Put a text in here!",
      "width": "100%",
      "height": "100%",
      "position" : {
        "x": 10,
        "y": 10
      }
    }

将所有对象放在一个中并将其作为JSON传递到服务器上，然后从同一对象重建它。 您肯定需要的不仅仅是javascript。

有没有办法保存用户对HTML页面所做的所有更改？

2 个答案: