如何自定义界面并将其保存以便可以再次访问？

Question

我正在试验 Javascript 拖放。 我已经构建了一个简单的界面，可通过拖放功能进行编辑。

这是我的索引.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>

这是我的风格。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;
}

这是我的 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)

}

好的。 假设我是一个用户，将图片从第一个框移到了第四个框。 下次登录时，我希望看到第四个框上的图片。

问题是：

如何保存新用户的布局？
当我再次打开页面时如何回忆它？

我对“后端”部分不感兴趣。 我只想了解如何从使用 Javascript 构建的自定义布局中提取信息以及如何在新页面上重建它。

非常感谢！

Answer 1

您可以做的是将索引保存在本地存储中的“空” class 元素列表中。 查看新的 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);
}

这是 JSFiddle： https://codepen.io/mero789/pen/eYpvYVY

Answer 2

由于 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);
}

如何自定义界面并将其保存以便可以再次访问？

问题描述

2 个解决方案

解决方案1
0 2020-04-23 23:29:56

解决方案2
0 已采纳 2020-04-25 21:28:13

如何自定义界面并将其保存以便可以再次访问？

问题描述

2 个解决方案

解决方案1 0 2020-04-23 23:29:56

解决方案2 0 已采纳 2020-04-25 21:28:13

解决方案1
0 2020-04-23 23:29:56

解决方案2
0 已采纳 2020-04-25 21:28:13