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

Question

我正在尝试生成一份关于用户在 div 元素内创建组件块（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 位置应该是您所需要的。

您的 post 没有说明您希望如何存储这些数据。如果是我，我会使用 SQL 数据库，但其他选项（如 Cookies 或 LocalStorage）也是替代方案。您需要一个加载和保存样式函数来将数据拉取和推送到它的数据源。

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

Ways to copy or save and retrieve a element and it's children elements from one page to another?

javascript

jquery

jquery-ui