Drag and Drop from localstorage HTML5 not working

Question

I have created a web page with drag and drop features for some of the elements.

Once the drag and drop are done, I store the elements which are in the droppable area in the local storage of the browser.

Later when the page is accessed again, I take the values from local storage and restore them on the web page.

After I restore, I couldn't drag the elements in the droppable area within its containment. Could anyone please help? Below is the code I have 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

It must be somehow caused by the element not being dragged into the droppable area, making the revert parameter active because of this. Not sure how to solve this better than by just disabling it for the elements present inside it at the start:

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

Working FIDDLE