Question

我最深切的道歉。这是我的问题的链接，我真的需要帮助。以下查询，我已经修复过。

请帮助我。

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>

Answer 1

尝试Jsfiddle

此处您正在使用可拖动事件，并且您正在动态添加该关闭按钮

因此，无论何时您想删除或想要为动态添加元素添加任何功能，您都必须执行此类操作。

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

Answer 2

您的代码在javascript代码末尾缺少});。

Uncaught SyntaxError: Unexpected end of input

修复此问题，然后将$(".boxclose").click()更改为$(document).on("click", ".boxclose");

此代码适用于我

<HTML><HEAD>
  <style>
  .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; }
</style>
<link rel="stylesheet" href="//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>
    <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"); }
        });

        $(document).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>

WORKING FIDDLE

Answer 3

当您的代码在加载页面时调用页面上尚未显示的元素时，通常会发生您正在处理的刷新问题。通过刷新页面，您的代码将再次运行，并且元素位于页面上，因此它恰好可以正常工作。

确保使用on document load，这样代码才会在页面完全加载时运行。

刷新页面后，JQuery单击工作

3 个答案: