html - JQuery click works after refreshing the page -
my deepest apologizes. here link of question need assistance. below query, have fixed.
please me out anyone.
drag , drop localstorage html5 not working
i prepared drag , drop widgets in html, css, jquery. drag , drop works fine. made icon show dragged widgets once dropped in place required. icon shows fine once dropped.
i wanted remove widget when click on close icon. doesn't remove widget. tried refresh page see whether works after that. , is. i'm not sure why jquery behaves way.
i tried solution. see many solutions. nothing fix problem. help?
below code have used:
/* ----- javascript ----- */ $(function() { if (localstorage.length != 0) { (var = 0; < 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>
try jsfiddle
here using draggable event , adding close button dynamically
so whenever want remove or want add function dynamically added element have this.
<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) { (var = 0; < 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>
Comments
Post a Comment