How can I customize an interface and save it so it can be accessed again?

Question

I am experimenting with Javascript drag and drop. I have built a simple interface editable with drag and drop features.

Here my index.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

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:

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:

how do I save the new user's layout?
how do I recall it when I open the page again?

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.

Many thanks!

Answer 1

What you can do is save the index in the list of "empty" class elements in local storage. Check out the new JS code:

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

Answer 2

This is the new main.js thanks to Ameer input

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

How can I customize an interface and save it so it can be accessed again?

Question

2 answers

solution1
0 2020-04-23 23:29:56

solution2
0 ACCPTED 2020-04-25 21:28:13

How can I customize an interface and save it so it can be accessed again?

Question

2 answers

solution1 0 2020-04-23 23:29:56

solution2 0 ACCPTED 2020-04-25 21:28:13

solution1
0 2020-04-23 23:29:56

solution2
0 ACCPTED 2020-04-25 21:28:13