javascript - 将元素及其子元素从一个页面复制或保存和检索到另一个页面的方法？

Question

我正在尝试生成用户在 div 元素内创建组件 block (div)的报告。为此，我需要将最终报告中的附加组件显示为图像或 html 元素。

工作演示

我需要单独显示网格线的副本以及在其之上创建的组件(div)。

ui.position 给出元素从页面顶部开始的位置，但我需要父 div 标记内的位置。

$element.draggable({
  containment: '#convas',
  drag: function(event, ui) {
    var resposition = ui.position;
    console.log(resposition);
  }
}).resizable({
  containment: '#convas',
  resize: function(event, ui) {
    var resposition = ui.position;
    console.log(resposition);
  }
});

请建议我一个更好的方法来解决这种情况。

Answer 1

您可以将 .position() 与 at 的相对像素寻址结合使用。

Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. A single value such as "right" will be normalized to "right center", "top" will be normalized to "center top" (following CSS convention). Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". Example: "left top" or "center center". Each dimension can also contain offsets, in pixels or percent, e.g., "right+10 top-25%". Percentage offsets are relative to the element being positioned.

或者，如下所示，您可以使用 CSS 定位，其中父级是相对的，子级是绝对的。

假设您的数据正在以某种方式检索，您可以创建一个函数来将元素放置在特定位置。这是一个例子。

$(function() {
  var myItems = [{
      id: "el-1",
      label: "Administration",
      position: {
        top: 0,
        left: 0
      },
      props: {
        width: 90,
        height: 90
      }
    },
    {
      id: "el-2",
      label: "Canteen",
      position: {
        top: 0,
        left: 102
      },
      props: {
        width: 45,
        height: 90
      }
    }, {
      id: "el-3",
      label: "Storage (Cold)",
      position: {
        top: 103,
        left: 0
      },
      props: {
        width: 90,
        height: 25
      }
    }
  ];

  function placeElem(dObj, $p) {
    var item = $("<div>", {
      id: dObj.id,
      class: "placed draggable ui-widget-content",
      width: dObj.props.width + "px",
      height: dObj.props.height + "px"
    }).html(dObj.label).appendTo($p);
    item.css({
      left: dObj.position.left + "px",
      top: dObj.position.top + "px"
    });
  }

  function getElPosition($el) {
    var r = {
      top: Math.round(parseInt($el.css("top").slice(0, -2))),
      left: Math.round(parseInt($el.css("left").slice(0, -2)))
    };
    return r;
  }

  function log(h) {
    $("#log").prepend(h);
  }

  function getJSON() {
    // Get JSON data from Data Source and return it. Similar to 'myItems'
    // Use placeElem() to load the data as eleemnts to page
  }

  function saveJSON() {
    // Save JSON data, like myItems, to Data Source
    // Iterate each element and use getElPosition() to build data
    var items = $(".placed");
    var data = [];
    items.each(function(i, el) {
      data.push({
        id: $(el).attr("id"),
        label: $(el).text().trim(),
        position: getElPosition($(el)),
        props: {
          width: $(el).width(),
          height: $(el).height()
        }
      });
    });
    var json = JSON.stringify(data);
    console.log(data);
    console.log(json);
  }

  $.each(myItems, function(key, item) {
    log("<p>Adding " + item.id + ", left: " + item.position.left + ", top: " + item.position.top + "</p>");
    placeElem(item, $("#containment-wrapper"));
    var p = getElPosition($("#" + item.id));
    log("<p>" + item.id + " position left:  " + p.left + ", position top: " + p.top + "</p>");
  });

  $(".draggable").draggable({
    containment: "parent",
    start: function(e, ui) {
      var p = getElPosition($(this));
      log("<p>Drag Start " + $(this).attr("id") + " position left:  " + p.left + ", position top: " + p.top + "</p>");
    },
    stop: function(e, ui) {
      var p = getElPosition($(this));
      log("<p>Drag Stop " + $(this).attr("id") + " position left:  " + p.left + ", position top: " + p.top + "</p>");
    }
  });
});

.draggable {
  width: 90px;
  height: 90px;
  padding: 0.5em;
  float: left;
  margin: 0;
  font-size: 0.65em;
}

#containment-wrapper {
  width: 65%;
  height: 300px;
  border: 2px solid #ccc;
  padding: 0;
  position: relative;
}

#containment-wrapper .placed {
  position: absolute;
  background: #999;
}

h3 {
  clear: left;
}

#log {
  font-size: .5em
}

#log p {
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</style>
<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>

<div id="containment-wrapper">
</div>

<div id="log"></div>

一旦放置，您将需要一个可以读取当前位置的函数。由于它位于相对定位的 div 内，因此 top 和 left 位置应该就是您所需要的。

您的帖子没有讨论您希望如何存储这些数据。如果是我，我会使用 SQL 数据库，但其他选项(例如 Cookie 或 LocalStorage)也是替代方案。您需要一个加载和保存样式函数来将数据拉取和推送到其数据源。