[英]How can I customize an interface and save it so it can be accessed again?
I am experimenting with Javascript drag and drop.我正在试验 Javascript 拖放。 I have built a simple interface editable with drag and drop features.
我已经构建了一个简单的界面,可通过拖放功能进行编辑。
Here my index.html:这是我的索引.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Drag&Drop</title>
</head>
<body>
<div class="empty">
<div class="item" draggable="true"></div>
</div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<script src="js/main.js"></script>
</body>
</html>
Here my style.css这是我的风格。css
body {
background: white;
}
.lists {
display: flex;
flex:1;
width 100%;
overflow-x:scroll;
}
.item {
background-image: url('http://source.unsplash.com/random/150x150');
position: relative;
height: 150px;
width: 150px;
top: 5px;
left: 5px;
cursor: pointer;
}
.empty {
display: inline-block;
height: 160px;
width: 160px;
margin: 5px;
border: 3px blue;
background-color: lightgray;
}
.hold {
border: solid lightgray 4px;
}
.hovered {
background: darkgray;
border-style: dashed;
}
.invisible {
display: none;
}
Here my main.js:这是我的 main.js:
const item = document.querySelector('.item');
const empties = document.querySelectorAll('.empty');
//Item Listeners
item.addEventListener('dragstart',dragStart);
item.addEventListener('dragend',dragEnd);
//Loop through empties
for (const empty of empties) {
empty.addEventListener('dragover', dragOver);
empty.addEventListener('dragenter', dragEnter);
empty.addEventListener('dragleave', dragLeave);
empty.addEventListener('drop', dragDrop);
}
//Drag Functions
function dragStart() {
console.log('Start');
this.className += ' hold';
setTimeout(()=> this.className = 'invisible', 0);
}
function dragEnd() {
console.log('End');
this.className = 'item';
}
function dragOver(e) {
console.log('Over');
e.preventDefault();
}
function dragEnter(e) {
console.log('Enter');
e.preventDefault();
this.className += ' hovered';
}
function dragLeave() {
console.log('Leave');
this.className = 'empty';
}
function dragDrop() {
console.log('Drop');
this.className = 'empty';
this.append(item)
}
Ok.好的。 Let's imagine that I am a user who moved the picture from the first box to the fourth box.
假设我是一个用户,将图片从第一个框移到了第四个框。 When I login the next time, I am expecting to see the picture on the fourth box.
下次登录时,我希望看到第四个框上的图片。
The questions are:问题是:
I am not interested in the "backend" part.我对“后端”部分不感兴趣。 I just want to understand how to extract info from a custom layout built with Javascript and how to rebuild it on a new page.
我只想了解如何从使用 Javascript 构建的自定义布局中提取信息以及如何在新页面上重建它。
Many thanks!非常感谢!
What you can do is save the index in the list of "empty" class elements in local storage.您可以做的是将索引保存在本地存储中的“空” class 元素列表中。 Check out the new JS code:
查看新的 JS 代码:
const empties = document.querySelectorAll('.empty');
let storage = JSON.parse(localStorage.getItem("elementLocation")).location
let storeData = {location: storage}
if (storage !== null) {
let array = document.getElementsByClassName("empty");
array[0].innerHTML = "";
array[storage].innerHTML = '<div class="item" draggable="true">'
alert(storage)
}
const item = document.querySelector('.item');
//Item Listeners
item.addEventListener('dragstart',dragStart);
item.addEventListener('dragend',dragEnd);
//Loop through empties
for (const empty of empties) {
empty.addEventListener('dragover', dragOver);
empty.addEventListener('dragenter', dragEnter);
empty.addEventListener('dragleave', dragLeave);
empty.addEventListener('drop', dragDrop);
}
//Drag Functions
function dragStart() {
this.className += ' hold';
setTimeout(()=> this.className = 'invisible', 0);
}
function dragEnd() {
this.className = 'item';
}
function dragOver(e) {
e.preventDefault();
}
function dragEnter(e) {
e.preventDefault();
this.className += ' hovered';
}
function dragLeave() {
this.className = 'empty';
}
function dragDrop() {
this.className = 'empty';
this.append(item);
let parentArray = document.getElementsByClassName("empty");
storeData.location = [].indexOf.call(parentArray, this);
localStorage.removeItem('elementLocation');
localStorage.setItem('elementLocation', JSON.stringify(storeData));
alert(JSON.parse(localStorage.getItem("elementLocation")).location);
}
Here's the JSFiddle: https://codepen.io/mero789/pen/eYpvYVY这是 JSFiddle: https://codepen.io/mero789/pen/eYpvYVY
This is the new main.js thanks to Ameer input由于 Ameer 输入,这是新的 main.js
const empties = document.querySelectorAll('.empty');
let storage = JSON.parse(localStorage.getItem("elementLocation"))
let storeData = {location: storage}
if (storage == null) {
console.log("Storage Non Existing")
}
else {
console.log("Storage Existing")
console.log(storage.location)
let array = document.getElementsByClassName("empty");
array[0].innerHTML = "";
array[storage.location].innerHTML = '<div class="item" draggable="true">'
alert(storage.location)
}
const item = document.querySelector('.item');
//Item Listeners
item.addEventListener('dragstart',dragStart);
item.addEventListener('dragend',dragEnd);
//Loop through empties
for (const empty of empties) {
empty.addEventListener('dragover', dragOver);
empty.addEventListener('dragenter', dragEnter);
empty.addEventListener('dragleave', dragLeave);
empty.addEventListener('drop', dragDrop);
}
//Drag Functions
function dragStart() {
this.className += ' hold';
setTimeout(()=> this.className = 'invisible', 0);
}
function dragEnd() {
this.className = 'item';
}
function dragOver(e) {
e.preventDefault();
}
function dragEnter(e) {
e.preventDefault();
this.className += ' hovered';
}
function dragLeave() {
this.className = 'empty';
}
function dragDrop() {
this.className = 'empty';
this.append(item);
let parentArray = document.getElementsByClassName("empty");
storeData.location = [].indexOf.call(parentArray, this);
localStorage.removeItem('elementLocation');
localStorage.setItem('elementLocation', JSON.stringify(storeData));
alert(JSON.parse(localStorage.getItem("elementLocation")).location);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.