Giri Dharan Giri Dharan - 12 days ago 4
CSS Question

JQuery click works after refreshing the page

My deepest apologizes. Here is the link of my question for which I really need assistance. the below query, I have already fixed.

Please help me out anyone.

Drag and Drop from localstorage HTML5 not working

I prepared the some drag and drop widgets in HTML, CSS, JQuery.
Drag and drop works fine. I made an icon to show for the dragged widgets once it is dropped in the place required. The icon shows fine once dropped.

I wanted to remove the widget when we click on the close icon. But it doesn't remove the widget. I tried to refresh the page to see whether it works after that. And it is. I'm not sure why JQuery behaves this way.

I tried to look for the solution. I could see many solutions. But nothing fix my problem. Anyone could help?

Below is the code I have used:



/* ----- 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>




Answer

Try Jsfiddle

Here You are using draggable event and you are adding that close button dynamically

So whenever you want to remove or want to add any function to dynamically added element you have to do something like 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) {
   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>
Comments