本地存儲-jquery

Question

事情是當我點擊一個按鈕，它創造了可拖動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"){ 
 
     \t 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/

憑藉Div時的多類型：

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