-1
我已經創建了一個網頁，其中包含一些元素的拖放功能。從本地存儲中拖放HTML5不起作用
一旦拖放完成後，我存儲能夠在瀏覽器的本地存儲可投放區域的元素。
後來，當頁面被再次訪問，我從本地存儲的值，並在網頁上恢復它們。
我恢復後，我也拖不動的元素在其殼內可投放區域。任何人都可以請幫忙？以下是我用過的代碼。
這裏是鏈接到FIDDLE
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);
}
}
});
});
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; }