如何自定義界面並將其保存以便可以再次訪問？

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