本地存储- Jquery

Question

问题是，当我单击一个按钮时，它会创建一个可拖动的div的克隆体，并且我希望使用本地存储.Right在刷新后保存已被克隆的移动div的位置，现在我的代码可以保存原始div，但是克隆的div在refresh.Please提供解决方案之后被删除，以获得所需的functionality.For JS：

var sPositions = localStorage.positions || "{}",
    positions = JSON.parse(sPositions);
$.each(positions, function (id, pos) {
    $("#" + id).css(pos)
})
$("#divd").draggable({
    containment: "#containment-wrapper",
    scroll: false,
    stop: function (event, ui) {
        positions[this.id] = ui.position;
        localStorage.positions = JSON.stringify(positions);
    }
});


$("#button").click(function () {
    $("#divd").clone().insertAfter("#body").draggable();
});

这是原始的div代码-

<div id="divd" class="draggable ui-widget-content"></div>
<button id="button">Button</button>

Answer 1

在加载时重新创建所有div，并将其与可拖放绑定。

见下面的示例：

var globalCount = 1;
var sPositions = localStorage.positions || "{}",
    positions = JSON.parse(sPositions);
$.each(positions, function (id, pos) {
    if(id != "divd"){
     	var cloned = $("#divd").clone();
        cloned[0].id = id;
        cloned.insertAfter("#divd")
         globalCount++;
    }
    $("#" + id).css(pos)
});
$(".common-drag").draggable({
    containment: "#containment-wrapper",
    scroll: false,
    stop: function (event, ui) {
        positions[this.id] = ui.position
        localStorage.positions = JSON.stringify(positions)
    }
});

$("#button").click(function () {
    var cloned = $("#divd").clone();
    cloned[0].id = "divd" + globalCount++;
    cloned.insertAfter("#divd").draggable({
        containment: "#containment-wrapper",
        scroll: false,
        stop: function (event, ui) {
            positions[this.id] = ui.position
            localStorage.positions = JSON.stringify(positions)
        }
    });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">

<div id="divd" class="draggable ui-widget-content common-drag">Test</div>
<button id="button">Button</button>

​

演示：http://jsfiddle.net/kishoresahas/sh72djwz/

具有多种类型的Divs：

演示：http://jsfiddle.net/kishoresahas/sh72djwz/2/