Как я могу настроить интерфейс и сохранить его, чтобы он снова был доступен? - PullRequest
Новая
       36

Как я могу настроить интерфейс и сохранить его, чтобы он снова был доступен?

0 голосов
/ 24 апреля 2020

Я экспериментирую с Javascript drag and drop. Я построил простой интерфейс, редактируемый с помощью функций перетаскивания.

Вот мой индекс. 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;
}

Вот мой главный. 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)

}

Ок. Давайте представим, что я пользователь, который переместил изображение из первого блока в четвертый блок. Когда я войду в следующий раз, я ожидаю увидеть изображение на четвертом поле.

Вопросы:

  1. как сохранить макет нового пользователя?
  2. как вызвать его при повторном открытии страницы?

Меня не интересует «бэкэнд». Я просто хочу понять, как извлечь информацию из пользовательского макета, созданного с помощью Javascript, и как восстановить его на новой странице.

Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 26 апреля 2020

Это новый главный. js благодаря входу Ameer 

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);
}
0 голосов
/ 24 апреля 2020

Что вы можете сделать, это сохранить индекс в списке «пустых» элементов класса в локальном хранилище. Проверьте новый 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...