我深表歉意。这是我的问题的链接,我真的需要帮助。下面的问题,我已经解决了。
请帮帮我。
Drag and Drop from localstorage HTML5 not working
我在html、css、jquery中准备了一些拖放小部件。
拖放操作很好。我制作了一个图标,当拖动的小部件放到所需的位置时,它就会显示出来。图标一经放下就显示良好。
我想在单击关闭图标时删除小部件。但它不会删除小部件。我试着刷新页面,看看之后是否有效。是的。我不知道jquery为什么会这样。
我试着寻找解决办法。我能看到很多解决办法。但没什么能解决我的问题。有人能帮忙吗?
下面是我使用的代码:
/* ----- JavaScript ----- */
$(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");
droppable.append(clonediv.draggable({
helper: 'original',
revert: 'valid',
containment: "#droppable",
grid: [30, 30],
snap: true
}).resizable({
containment: "#droppable"
}));
clonediv.find('a').removeClass("displayblock");
console.log(clonediv);
}
} else {}
$(".bat_voltage").draggable({
revert: true,
grid: [30, 30]
});
$(".left_flight").draggable({
revert: true,
grid: [30, 30]
});
$(".cnt_flight").draggable({
revert: 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 {
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"
});
droppable.find("." + id[0]).find('a').removeClass("displayblock");
localStorage.setItem("drop" + id[0], droppable);
}
}
});
$("#change").click(function() {
var bat_value = parseInt($("#bat_level").val());
if (bat_value > 25) {
progressValue(bat_value, "Green");
} else if (bat_value > 15 && bat_value < 25) {
progressValue(bat_value, "Yellow");
} else if (bat_value < 15) {
progressValue(bat_value, "Red");
}
});
$(".boxclose").click(function() {
alert("remove widget");
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]);
});
});
/* ----- 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;
}
<!----- HTML ----->
<HTML>
<HEAD>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</HEAD>
<body>
<form id="form1" runat="server">
<div>
<div>
<div class="bat_voltage floatleft ui-widget-content">
<a class="boxclose displayblock">×</a>
<p>Battery Voltage</p>
</div>
<div class="left_flight floatleft ui-widget-content">
<a class="boxclose displayblock">×</a>
<p>Flight Time Left</p>
</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>
</form>
</body>
</HTML>
最佳答案
尝试Jsfiddle
这里您使用的是draggable事件,并且动态地添加了关闭按钮
因此,无论何时您想删除或添加任何函数到动态添加的元素,您都必须这样做。
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.bat_voltage {
width: 250px;
height: 100px;
padding: 0.5em;
margin: 10px 10px 10px 0;
z-index: 1;
}
.ui-widget-content,
.ui-widget-header#droppable { border: 2px solid #000; }
.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;
}
</style>
<script>
$(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");
droppable.append(clonediv.draggable({
helper: 'original',
revert: 'valid',
containment: "#droppable",
grid: [30, 30],
snap: true
}).resizable({
containment: "#droppable"
}));
clonediv.find('a').removeClass("displayblock");
console.log(clonediv);
}
} else {}
$(".bat_voltage").draggable({
revert: true,
grid: [30, 30]
});
$(".left_flight").draggable({
revert: true,
grid: [30, 30]
});
$(".cnt_flight").draggable({
revert: 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 {
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"
});
droppable.find("." + id[0]).find('a').removeClass("displayblock");
localStorage.setItem("drop" + id[0], droppable);
}
}
});
$("#change").click(function() {
var bat_value = parseInt($("#bat_level").val());
if (bat_value > 25) {
progressValue(bat_value, "Green");
} else if (bat_value > 15 && bat_value < 25) {
progressValue(bat_value, "Yellow");
} else if (bat_value < 15) {
progressValue(bat_value, "Red");
}
});
$("body").on('click','.boxclose',function() {
alert("remove widget");
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]);
});
});
</script>
</HEAD>
<body>
<form id="form1" runat="server">
<div>
<div>
<div class="bat_voltage floatleft ui-widget-content">
<a class="boxclose displayblock">×</a>
<p>Battery Voltage</p>
</div>
<div class="left_flight floatleft ui-widget-content">
<a class="boxclose displayblock">×</a>
<p>Flight Time Left</p>
</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>
</form>
</body>
</html>