将带有坐标的动态 jquery 项保存到 localStorage

问题描述

我在单击菜单按钮时动态生成可拖动/可调整大小的 jQuery 项。我需要将项目坐标/属性保存到 localStorage。我有这个处理静态项目，但它不适用于动态。在生成动态项之前和之后，控制台日志为 localStorage 返回“undefined”。

代码如下：

HTML：

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

jQuery

var positions = JSON.parse(localStorage.positions || "{}");
$(function () {

  //store coordinates of items - CURRENTLY NOT FUNCTIONING
  var d = $("[class=draggable]").attr("id",function (i) {
    return "draggable_" + i;
  });
  $.each(positions,function (id,pos) {
    $("#" + id).css(pos);
  });

  d.draggable({
    containment: "#containment-wrapper",stack: ".draggable",scroll: false,stop: function (event,ui) {
      positions[this.id] = ui.position;
      localStorage.positions = JSON.stringify(positions);
    }
  });

  function getPositions() {
    return localStorage.positions;
  } //
  console.log(getPositions());
  // END store coordinates

  //reset storage and reload page
  $("#clear").click(function () {
    window.localStorage.clear();
    window.location.reload(true);
  });

 //DYNAMICALLY generate new copies of items WITH UNIQUE ID
  var i = 1;
  $("#product").click(function () {
    var dynamic_div = $("<div />",{
      id: "product" + i
    })
      .css({
        id: "draggable",padding: "0.5em",//float: "left",margin: "0 10px 10px 0",cursor: "move",position: "absolute",background: "white"
        // border: "1px solid #ccc"
      })
      .addClass("draggable","ui-widget-content");

    $(dynamic_div)
      .append(
        '<div id="block_container"><div class="remove_block"></div><img src="image.svg" alt="Product"></div>'
      )
      .css({
        width: 100
      });

    $(dynamic_div).append("<div>Product</div>").css({
      "text-align": "center","font-size": "24px",padding: " 0.25em","line-height": "100%"
      //"white-space": "Nowrap"
    });

    // APPEND THE NEWLY CREATED DIV TO "containment-wrapper".
    $(dynamic_div)
      .appendTo("#containment-wrapper")
      .draggable({
        containment: "#containment-wrapper",scroll: false
      })
      .resizable({
        minHeight: 100,minWidth: 100,maxHeight: 500,maxWidth: 500,aspectRatio: false
      });
    i++;
  });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）