0

Задача: после перетаскивания первого элемента 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>

CSS:

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

JS:

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

2 ответа 2

0

Я доработал предыдущий ответ таким образом, что теперь можно любой элемент перетащить из любой в любую ячейку, и после обновления страницы ихние местоположения сохраняются в localStorage. Для этого переписал весь JS-код так:

document.addEventListener('DOMContentLoaded', (event) => {
    let divs = document.querySelector(".grid").getElementsByTagName("div");
    for(i = 0; i < divs.length; i ++){
        divs[i].id = "place" + i;
        divs[i].innerHTML = "<p>" + i + "</p>";
        divs[i].draggable = "true";
        divs[i].addEventListener('dragstart', handleDragStart, false);
        divs[i].addEventListener('dragenter', handleDragEnter, false);
        divs[i].addEventListener('dragover', handleDragOver, false);
        divs[i].addEventListener('dragleave', handleDragLeave, false);
        divs[i].addEventListener('drop', handleDrop, false);
        divs[i].addEventListener('dragend', handleDragEnd, false);
    }
    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');
            localStorage.setItem(dragSrcEl.id, dragSrcEl.innerHTML); // сохранение
            localStorage.setItem(this.id, this.innerHTML);
        } 
        return false;
    }
    function handleDragEnd(e) {
        this.style.opacity = '1';
        dragSrcEl.classList.remove('over');
        this.classList.remove('over');
    }
    for(let i = 0; i < divs.length; i ++){
        if(localStorage.getItem('place' + i)) divs[i].innerHTML = localStorage.getItem('place' + i); // восстановление
    }    
});

0

В Вашем случае в localStorage лучше сохранять не позицию offsetLeft, а innerHTML элементов place1 и place2. Для этого в конец функции handleDragEnd() добавьте:

localStorage.setItem('place1', place1.innerHTML); // сохранение

localStorage.setItem('place2', place2.innerHTML);

а в конец всего DOMContentLoaded() добавить это:

if(localStorage.getItem('place1')) place1.innerHTML = localStorage.getItem('place1'); // восстановление

if(localStorage.getItem('place2')) place2.innerHTML = localStorage.getItem('place2');

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.