Drag and drop from localstorage HTML5 not working

See more:

CSS

jQuery

HTML5

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 fiddle link of my work:

FIDDLE

What I have tried:

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();
                $("#droppable").append(clonediv.draggable({ containment: "#droppable", grid: [30, 30] }).resizable({ containment: "#droppable" }));
                console.log(clonediv);
            }
        }
        else { }

        $(".bat_voltage").draggable({ helper: 'clone', snap: true, grid: [30,30] });
        $(".left_flight").draggable({ helper: 'clone', snap: true, grid: [30, 30] });
        $(".cnt_flight").draggable({ helper: 'clone', snap: true, grid: [30, 30] });
        $("#droppable").droppable({
            drop: function (event, ui) {
                var dragged = ui.draggable;
                var id = dragged.attr("class").split(' ');
                var droppable = $("#droppable");
                var find = (droppable.find("." + id[0]));
                console.log(find);
                if (find.length != 0) { }
                else {
                    localStorage.setItem("drop" + id[0], droppable);

                    ui.helper.css({ 'top': 0, 'left': 0, 'position': 'relative', 'margin': '0px auto', 'padding': '0.5em', 'z-index': 0 });
                    ui.helper.clone().appendTo("#droppable").draggable({ snap: true, grid: [30, 30] }).resizable({ containment: "#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; }

HTML:

<div>
    <div>
    <div class="bat_voltage floatleft ui-widget-content" >
      <p>Battery Voltage</p>
    </div>

    <div class="left_flight floatleft ui-widget-content" >
      <p>Flight Time Left</p>
    </div>

    <div class="cnt_flight floatleft ui-widget-content" >
      <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>