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 that you have read and understand our privacy policy and code of conduct.

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