从本地存储拖放HTML5不工作

我已经为一些元素创建了一个带有拖放功能的网页。

拖放完成后，我将可拖放区域中的元素存储在浏览器的本地存储中。

之后，当再次访问页面时，我从本地存储中获取值并在网页上恢复它们。

在我恢复后，我无法拖动可拖放区域内的元素。有人能帮忙吗?下面是我使用的代码:

这里是的链接。

HTML×

<div class="left_flight floatleft ui-widget-content">
  <a class="boxclose displayblock">×</a>
  <p>Flight Time Left</p>
  <div class="flightLeft"></div>
</div>
<div class="cnt_flight floatleft ui-widget-content">
  <a class="boxclose displayblock">×</a>
  <p>Current Flight Time</p>
  <div class="curFlight"></div>
</div>
<div style="clear:both"></div>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</div>

JS:

$(function() {
if (localStorage.length > 0) {
for (var i = 0; i < localStorage.length; i++) {
  var dropClass = localStorage.key(i);
  var clonediv = $("." + dropClass.substr(4, dropClass.length - 4)).clone();
  var droppable = $("#droppable");
  clonediv.appendTo(droppable);
  clonediv
  //.draggable({ revert: false, grid: [30, 30], scroll: true })
  //.sortable()
    .resizable({
    containment: "#droppable"
  });
  clonediv.find('a').removeClass("displayblock").click(function() {
    var par = $(this).parent();
    var id = par.attr("class").split(' ');
    var droppable = $("#droppable");
    var removing = droppable.find("." + id[0]);
    removing.remove();
    localStorage.removeItem("drop" + id[0]);
  });
}
} else {}
$(".bat_voltage").draggable({
revert: true,
grid: [30, 30],
scroll: true
});
$(".left_flight").draggable({
revert: true,
grid: [30, 30],
scroll: true
});
 $(".cnt_flight").draggable({
revert: true,
grid: [30, 30],
scroll: true
});
$("#droppable").droppable({
drop: function(event, ui) {
  var dragged = ui.draggable;
  var id = dragged.attr("class").split(' ');
  var droppable = $("#droppable");
  var findElement = (droppable.find("." + id[0]));
  if (findElement.length != 0) {} else {
    ui.helper.css({
      'top': 0,
      'left': 0,
      'position': 'relative'
    });
    ui.helper.clone()
      .appendTo(droppable)
      .draggable({
        containment: "#droppable",
        grid: [30, 30],
        snap: true
      })
      .resizable({
        containment: "#droppable"
      }).sortable({
        revert: false
      });
    droppable.find("." + id[0]).find('a').removeClass("displayblock").click(function() {
      var par = $(this).parent();
      var id = par.attr("class").split(' ');
      var droppable = $("#droppable");
      var removing = droppable.find(findElement);
      removing.remove();
      localStorage.removeItem("drop" + id[0]);
    });
    localStorage.setItem("drop" + id[0], droppable);
  }
}
});
});

.bat_voltage { width: 250px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; z-index: 1; }
.floatleft {  float: left; }
.left_flight { width: 250px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; z-index: 1; }
.cnt_flight { width: 250px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; z-index: 1;  }
#droppable { width: 50%; height: 400px; padding: 0.5em; margin: 10px; resize: both;  border: 2px; overflow: auto; }
#progressbar {  width: 200px; height: 50px; margin-top: 20px; }
a.boxclose {  float: right;  margin-top: -10px; margin-right: -10px;  cursor: pointer;  color: #fff;  border: 1px solid #AEAEAE;  border-radius: 8px;
background: #605F61; font-size: 21px; font-weight: bold; display: inline-block;  line-height: 0px;  padding: 8px 3px;  display: block; }
.displaynone { display: none !important; }
 .displayblock { display: none !important;  }