Задача: после перетаскивания первого элемента place1 на место place2 необходимо сохранить новую позицию в localstorage. Проблема в том, что при получении offset, его невозможно изменить чтобы сохранить позицию после обновления страницы
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="js/script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- создаём контейнер, который будет отвечать за нашу сетку -->
<div class="grid">
<!-- и создаём 16 вложенных элементов -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div draggable="true" id="place1"><p>1</p></div>
<div draggable="true" id="place2"><p>2</p></div>
<div draggable="true" id="place3"><p>3</p></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
body{
/*настраиваем шрифт*/
font-family: sans-serif;
font-size: 20px;
}
/*общие настройки сетки*/
.grid {
/*подключаем сетку*/
display: grid;
/*формируем по 4 одинаковых строки и столбца*/
grid-template-columns: repeat(8, 100px);
grid-template-rows: repeat(4, 100px);
}
/*внешний вид ячеек*/
.grid > * {
/*фоновый цвет*/
background-color: #dbd9d7;
/*расстояние от одной границы ячейки до другой*/
margin: 2px;
}
p {
text-align: center;
}
.place {
cursor: move;
}
.place.over {
border: 3px dotted #666;
}
document.addEventListener('DOMContentLoaded', (event) => {
var dragSrcEl = null;
function handleDragStart(e) {
this.style.opacity = '0.2';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
function handleDragEnter(e) {
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');
}
function handleDrop(e) {
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html'); }
return false;
}
function handleDragEnd(e) {
this.style.opacity = '1';
// items.forEach(function (item) {
// item.classList.remove('over');
// });
place1.classList.remove('over')
place2.classList.remove('over')
}
// let items = document.querySelectorAll('.grid place');
// items.forEach(function(item) {
// item.addEventListener('dragstart', handleDragStart, false);
// item.addEventListener('dragenter', handleDragEnter, false);
// item.addEventListener('dragover', handleDragOver, false);
// item.addEventListener('dragleave', handleDragLeave, false);
// item.addEventListener('drop', handleDrop, false);
// item.addEventListener('dragend', handleDragEnd, false);
// });
let place1 = document.querySelector('#place1')
let place2 = document.querySelector('#place2')
place1.addEventListener('dragstart', handleDragStart, false);
place1.addEventListener('dragenter', handleDragEnter, false);
place1.addEventListener('dragover', handleDragOver, false);
place1.addEventListener('dragleave', handleDragLeave, false);
place1.addEventListener('drop', handleDrop, false);
place1.addEventListener('dragend', handleDragEnd, false);
place2.addEventListener('dragstart', handleDragStart, false);
place2.addEventListener('dragenter', handleDragEnter, false);
place2.addEventListener('dragover', handleDragOver, false);
place2.addEventListener('dragleave', handleDragLeave, false);
place2.addEventListener('drop', handleDrop, false);
place2.addEventListener('dragend', handleDragEnd, false);
store = place1.offsetLeft
localStorage.setItem('left', store)
place1.offsetLeft = localStorage.getItem('left')
});
Простой