猿问

无法使用 javascript 从本地存储中加载已删除项目的保存位置

我是编程新手；这是我关于 Stake-overflow 的第一个问题。


我想将放置的 div 的位置保存在本地存储中，并在刷新页面时检索该位置。


这是我到目前为止使用 Javascript 所取得的成就：


1）我可以将放置的 div 的位置存储在本地存储中（通过在 enddrop 事件上调用函数。）


2）我可以检索存储的位置（通过调用 onload 事件的函数）


我想要的是：


1）我想根据检索到的位置（本地存储的左侧和顶部位置）定位放置的 div。


这是我的代码：


HTML


<!DOCTYPE HTML>

<html>

<head>

</head>


<body onload="get_pos(event)">


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


<div style="margin-left:50px;" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


<div style="margin-left:100px;" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


<div draggable="true" ondragstart="drag(event)"  ondragend="set_pos(event);get_pos(event);" id="drag1">


pTop: <span id="pt"></span> <br>

pLeft: <span id="pl"></span> 

<span style="margin-left:80px;">Drag Me!</span>


</div>


</body>

</html>

CSS


  #div1 {

  width: 300px;

  height: 70px;

  padding: 10px;

  margin: 20px;

  border: 1px solid #aaaaaa;

}

#drag1 {

  width: 250px;

  height: 60px;

  padding: 5px;

  background: lightgray;

  border: 1px solid #aaaaaa;

}

Javascript：


function allowDrop(ev) {

  ev.preventDefault();

}


function drag(ev) {

  ev.dataTransfer.setData("text", ev.target.id);


}


function drop(ev) {

  ev.preventDefault();

  var data = ev.dataTransfer.getData("text");

  ev.target.appendChild(document.getElementById(data));


}


function set_pos(e) {

  var div = document.getElementById("drag1");

  var rect = div.getBoundingClientRect();

  x = rect.left;

  y = rect.top;


   // Store

  localStorage.setItem("pTop", y);

  localStorage.setItem("pLeft", x);

}


function get_pos(e) {

  var a = localStorage.getItem("pTop");

  var b = localStorage.getItem("pLeft");


  document.getElementById("drag1").style.top = a+"px";


  document.getElementById("drag1").style.left = b+"px";


  document.getElementById("pt").innerHTML = a+"px";


  document.getElementById("pl").innerHTML = b+"px";

}

任何帮助，将不胜感激！


HUX布斯
浏览 109回答 1
1回答

子衿沉夜

我已经让它动态化了，你现在可以拖动 div、图像，我会注意拖动元素的顺序。现在您可以修改它以存储在您的服务器而不是客户端中。快乐编码:)<!DOCTYPE HTML><html><head>&nbsp; <title>Retrieve drag position</title>&nbsp; <meta charset="utf-8">&nbsp; <style>&nbsp; &nbsp; * {&nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; }&nbsp; &nbsp; .drop_box {&nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; height: 120px;&nbsp; &nbsp; &nbsp; margin: 10px;&nbsp; &nbsp; &nbsp; padding: 5px;&nbsp; &nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; }&nbsp; &nbsp; img, .dragged_box {&nbsp; &nbsp; &nbsp; width: 90px;&nbsp; &nbsp; &nbsp; height: 30px;&nbsp; &nbsp; }&nbsp; &nbsp; .red {&nbsp; &nbsp; &nbsp; background-color: red;&nbsp; &nbsp; }&nbsp; &nbsp; .blue {&nbsp; &nbsp; &nbsp; background-color: blue;&nbsp; &nbsp; }&nbsp; &nbsp; .green {&nbsp; &nbsp; &nbsp; background-color: green;&nbsp; &nbsp; }&nbsp; </style></head><body onload="retrieve()">&nbsp; <div class="dragged_box red" draggable="true" ondragstart="drag(event)" id="drag_div1"></div>&nbsp; <div class="dragged_box blue" draggable="true" ondragstart="drag(event)" id="drag_div2"></div>&nbsp; <div class="dragged_box green" draggable="true" ondragstart="drag(event)" id="drag_div3"></div>&nbsp; <img src="https://img.icons8.com/color/48/000000/bungalow.png" draggable="true" ondragstart="drag(event)" id="drag_img1">&nbsp; <img src="https://img.icons8.com/ios-filled/50/000000/bungalow.png" draggable="true" ondragstart="drag(event)" id="drag_img2">&nbsp; <img src="https://img.icons8.com/ios/50/000000/bungalow.png" draggable="true" ondragstart="drag(event)" id="drag_img3">&nbsp; <div class="drop_box" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>&nbsp; <div class="drop_box" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>&nbsp; <div class="drop_box" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>&nbsp; <div class="drop_box" id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>&nbsp; <script>&nbsp; &nbsp; var draggedImages = {&nbsp; &nbsp; &nbsp; draggedIds: [],&nbsp; &nbsp; &nbsp; droppedIds: []&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; function allowDrop(ev) {&nbsp; &nbsp; &nbsp; ev.preventDefault();&nbsp; &nbsp; }&nbsp; &nbsp; function drag(ev) {&nbsp; &nbsp; &nbsp; ev.dataTransfer.setData("text", ev.target.id);&nbsp; &nbsp; }&nbsp; &nbsp; function drop(ev) {&nbsp; &nbsp; &nbsp; ev.preventDefault();&nbsp; &nbsp; &nbsp; var id = ev.dataTransfer.getData("text");&nbsp; &nbsp; &nbsp; if(draggedImages.draggedIds.indexOf(id) === -1) {&nbsp; &nbsp; &nbsp; &nbsp; draggedImages.draggedIds.push(id);&nbsp; &nbsp; &nbsp; &nbsp; draggedImages.droppedIds.push(ev.target.id);&nbsp; &nbsp; &nbsp; }else {&nbsp; &nbsp; &nbsp; &nbsp; var ind = draggedImages.draggedIds.indexOf(id);&nbsp; &nbsp; &nbsp; &nbsp; // to keep the order of images&nbsp; &nbsp; &nbsp; &nbsp; draggedImages.draggedIds.splice(ind, 1);&nbsp; &nbsp; &nbsp; &nbsp; draggedImages.droppedIds.splice(ind, 1);&nbsp; &nbsp; &nbsp; &nbsp; draggedImages.draggedIds.push(id);&nbsp; &nbsp; &nbsp; &nbsp; draggedImages.droppedIds.push(ev.target.id);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; localStorage["draggedImages"] = JSON.stringify(draggedImages);&nbsp; &nbsp; &nbsp; ev.target.appendChild(document.getElementById(id));&nbsp; &nbsp; }&nbsp; &nbsp; function retrieve() {&nbsp; &nbsp; &nbsp; if(localStorage["draggedImages"]) {&nbsp; &nbsp; &nbsp; &nbsp; draggedImages = JSON.parse(localStorage["draggedImages"]);&nbsp; &nbsp; &nbsp; &nbsp; draggedImages.draggedIds.forEach(function(draggedId, ind) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(draggedImages.droppedIds[ind]).appendChild(document.getElementById(draggedId));&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; </script></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答