Question

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

完成拖放操作后，我将可放置区域中的元素存储在浏览器的本地存储中。

稍后再次访问该页面时，我会从本地存储中获取值并将其还原到网页上。

恢复后，我无法拖动其收容区内的可放置区域中的元素。有人可以帮忙吗？以下是我使用的代码。

的链接

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

Answer 1

必须以某种方式导致元素未被拖入可放置区域，因此会使revert参数处于活动状态。不知道如何更好地解决这个问题，而不仅仅是在开始时为它内部的元素禁用它：

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

工作FIDDLE

从localstorage HTML5拖放不起作用

1 个答案: