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