我是编程新手；这是我关于 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";}任何帮助，将不胜感激！
1 回答
子衿沉夜
TA贡献1828条经验 获得超3个赞
我已经让它动态化了，你现在可以拖动 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>
添加回答
举报
0/150
提交
取消