Drag and drop from localstorage HTML5 not working

Question

I created a webpage with drag and drop features for some elements.

After the drag and drop is complete, I save the items that are in the droppable area in the local storage of the browser.

Later, when the page is available again, I take the values ​​from the local storage and restore them to the web page.

After recovery, I was not able to drag and drop items into the droppable area inside my shell. Can anyone help? Below is the code I used.

Here is the link to FIDDLE

HTML ×     

Battery voltage

  

<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);
  }
}
});

});

CSS

.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;  }

Answer 1

- , , - - . , , :

$('#droppable .ui-draggable').draggable( "option", "revert", false );

FIDDLE