Question

我有一个页面可以将文档的正文html存储在localStorage中。当页面重新加载时，它应该（并且确实）将内容放在重新加载之前的位置。我可以拖动，排序和调整大小，直到我刷新页面。之后拖动和排序继续工作，但调整大小失败。

在没有任何负面选民帮助的情况下，我自己想出来了。问题在于如何存储jquery的resizable。我必须删除页面重新加载时添加的元素。

编辑

附加标记存在功能问题（由resizable创建）。以下是作为正文的html保存到localstorage的内容：

<header>
  <div id="pgtitle">How much in a day?</div>
  <div id="login">Bob</div>
  <div id="urname"> 
    <div>What is your name?</div>
    <input id="name">
    <button type="button" id="button">Submit</button>
  </div> 
</header>

<div id="greeting"></div>
<br>
<div style="position: relative; left: 162px; top: 28px;" class="drag ui-draggable">
  <div class="header">
    <span style="color:white;">Quicklinks </span>
    <span style="color:white;width:10px" id="minmin" class="min">(X)</span>
  </div>

<div style="width: 577px; height: 312px;" id="mymenu" class="ui-widget-content ui-resizable">
  <button id="add">Add</button>
  <button id="remove">Remove</button>
  <br><br>

  <div id="addmenu" style="position:absolute;">
    <input id="itemname" placeholder="Enter name here" autocomplete="off">
    <input id="itemlink" placeholder="Enter hyperlink here" autocomplete="off">
    <button id="itemsubmit">Submit</button>
  </div>

  <div id="rmmenu" style="position:absolute;">
    <input id="rmitemname" placeholder="Item name" autocomplete="off">
    <button id="rmitemsubmit">Submit</button>
  </div>

  <div class="ui-sortable" id="mylinks"></div>
  <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div>
  <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div>
  <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
  <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div>
  <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div>
  <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>

</div> 
</div> 
<div id="mynextmenu"></div>

所以问题是以下保存的部分，但我不知道为什么它会破坏它或为什么它甚至存在：

<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div>
      <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div>
      <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
      <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div>
      <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div>
      <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>

以下是我遇到问题时的原因：

以下是jquery代码的片段：

  $(function() {

  if ( localStorage.mypage ) { $("body").html(localStorage.mypage); }

  $(".drag").draggable({ handle:'.header'})
  $("#mymenu").resizable();
  $( "#mylinks" ).sortable();
  $( "#mylinks" ).disableSelection();

  setInterval(function(){
    var mypage = $('body').html();
    localStorage.mypage = mypage
  },1000);
  });

以下是身体的片段：

<body>

<div class="drag">
  <div class="header">
    <span style="color:white;">Quicklinks  </span>
    <span style="color:white;width:10px" id="minmin" class="min">(X)</span>
  </div>
  <div id="mymenu" class="ui-widget-content">
    <div id="mylinks"></div>
  </div>
</div>

</body>

以下是整个事情：

<!DOCTYPE html>
<html>
<head>
<title>In a day</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style>
html, body { margin:0px; }
header { position:absolute; top:0px; left:0px; background: -moz-linear-gradient(#457995,#1C4961); color:white; height:30px; width:100%;  }
#pgtitle { position:absolute; top: 3px; left:20px; }
#login { position:absolute; top: 3px; right:30px; }
#urname { position:absolute; padding:10px; display: none; top: 30px; right:0px; width: 230px; height: 60px; background:#1C4961; color: white; }
#greeting { margin:0; margin-top:30px; text-align: center; background: #1C4961; color: white; }
#mymenu { padding:10px; width: 250px; background: #457995; min-height: 20px; }
#addmenu { display: none; }
#rmmenu { display: none; }
#mylinks div { margin:3px; }
.menuitems { background:lightgray;border:1px outset white; }
.header { width:100px;background:#1C4961;height:20px;margin:0px; }
</style>

<script>

$(function() {

  //check if cached page info and load if so
  if ( localStorage.mypage ) { $("body").html(localStorage.mypage); }
  //$("#mylinks").html(localStorage.mylinks);
  //localStorage.removeItem("mypage");

  //toggle login name and let change if needed
  $("#login").click(function() { $("#urname").toggle(); });
  var xman = $("#login").text()
  if ( localStorage.myname ) { 
    $("#login").text(localStorage.myname);
  }
  else { $("#login").text("Login"); }

  //Greeting for new user
  $("#button").click(function() {
  var truname = $("#name").val()
  $("#greeting").text("Hello " + truname + " Welcome to my site!!");
  $("#login").text(truname);
  $("#name").val("")
  $("#urname").hide();
  localStorage.myname = truname
  });

  //save links info
  $("#itemsubmit").click(function() {
  var itemname = $("#itemname").val()
  var itemlink = $("#itemlink").val()
  $("#mylinks").append("<div id='" + itemname + "' class='menuitems'><a href='" + itemlink + "' target='_blank'>" + itemname + "</a></div>");
  var mylinks = $("#mylinks").html()
  localStorage.mylinks = mylinks
  $("#addmenu").hide()
  });

  $("#add").click(function() {
    $("#addmenu").toggle();
    $("#rmmenu").hide()
  });

  $("#remove").click(function() {
    $("#rmmenu").toggle();
    $("#addmenu").hide()
  });

  $("#rmitemsubmit").click(function() {
    var rmitm = "#" + $("#rmitemname").val()
    $(rmitm).remove()
    $("#rmmenu").hide()
    var mylinks = $("#mylinks").html()
    localStorage.mylinks = mylinks
  });

  $(".drag").draggable({ handle:'.header'})

 // setTimeout(function() {
  $("#mymenu").resizable();
  //},2000);

  $( "#mylinks" ).sortable();
  $( "#mylinks" ).disableSelection();

  $(".min").click(function() {
    $(this).parents().find('#mymenu').slideToggle();
  });

  setInterval(function(){
    var mypage = $('body').html();
    localStorage.mypage = mypage
    },1000);

});

</script>

</head>
<body>
<header>
<div id="pgtitle">How much in a day?</div>
<div id="login"></div>

<div id="urname">
<div>What is your name?</div>
<input id="name">
<button type="button" id="button">Submit</button>
</div>
</header>

<div id="greeting"></div>
<br>
<div class="drag">
<div class="header">
  <span style="color:white;">Quicklinks  </span>
  <span style="color:white;width:10px" id="minmin" class="min">(X)</span>
</div>
<div id="mymenu" class="ui-widget-content">
<button id="add">Add</button>
<button id="remove">Remove</button>
<br><br>
<div id="addmenu" style="position:absolute;">
<input id="itemname" placeholder="Enter name here" autocomplete="off">
<input id="itemlink" placeholder="Enter hyperlink here" autocomplete="off">
<button id="itemsubmit">Submit</button>
</div>
<div id="rmmenu" style="position:absolute;">
<input id="rmitemname" placeholder="Item name" autocomplete="off">
<button id="rmitemsubmit">Submit</button>
</div>
<div id="mylinks"></div>
</div>
</div>
<div id="mynextmenu"></div>
</body>
</html>

Answer 1

我认为代码段顶部的所有代码都在<script>代码中？

尝试在drag div之后将所有脚本向下移动到页面底部。这样，你的jquery在他们写完之后就会发现它们。

尝试包装如下，等待DOM准备就绪：

if ( localStorage.mypage ) { $("body").html(localStorage.mypage); } // this outside the function wrapper.  You have it inside.

$(function () {     // wait for domready
    $(".drag").draggable({ handle:'.header'})
    $("#mymenu").resizable();
    $("#mylinks").sortable().disableSelection();

    setInterval(function(){
       var mypage = $('body').html();
       localStorage.mypage = mypage;
    },1000);
});

Answer 2

加载页面后，使用下面的jquery删除不需要的div $（ “div.ui调整大小手柄”）删除（）; $（ “div.ui调整大小-N”）除去（）;

一旦完成，它就会起作用。

页面加载后jquery resizable无法正常工作

2 个答案: