从localstorage HTML5拖放不起作用 [英] Drag and Drop from localstorage HTML5 not working

问题描述

我创建了一个网页，其中包含一些元素的拖放功能。

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.

这是 FIDDLE

HTML



×

电池电压

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

推荐答案

必须以某种方式导致元素不存在拖入可放置区域，使得恢复参数因此而激活。不知道如何更好地解决这个问题，而不是在开始时为其中的元素禁用它：

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

工作 FIDDLE

这篇关于从localstorage HTML5拖放不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！