Блог

Главная - Вопросы по программированию - Перетащите с помощью JS; сохраните переменную в текстовый файл вместо локального хранилища

Перетащите с помощью JS; сохраните переменную в текстовый файл вместо локального хранилища

#javascript #jquery #arrays #json #drag-and-drop

Вопрос:

Я нашел этот скрипт перетаскивания в Интернете и хочу реализовать его в своем следующем школьном проекте. Проблема в том, что скрипт сохраняет положение перетаскиваемого элемента в локальном хранилище. Я хотел бы сохранить его на стороне сервера в виде массива в текстовом файле, чтобы положение перетаскиваемого элемента не сбрасывалось после закрытия браузера. Я плохо разбираюсь в javascript, поэтому мне нужна небольшая помощь (:

Вот сценарий:

 var positions = JSON.parse(localStorage.positions || "{}");
$(function () {
    var d = $("[id=draggable]").attr("id", function (i) {
        return "draggable_"   i
    })
    $.each(positions, function (id, pos) {
        $("#"   id).css(pos)
    })

    d.draggable({
        containment: "#containment-wrapper",
        scroll: false,
        stop: function (event, ui) {
            positions[this.id] = ui.position
            localStorage.positions = JSON.stringify(positions)
        }
    });
});

Вот html идет вместе со сценарием:

 <!doctype html>
<html>

<link href="drag.css" rel="stylesheet"> 

<head>

</head>

<body>


<div id="containment-wrapper">
    <div id="draggable" class="ui-widget-content draggable">TEST</div>
    <div id="draggable" class="ui-widget-content draggable">TEST</div>
</div>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.js"> </script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
  integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="drag.js"></script>

</body>

</html>

И CSS:

   .draggable {
      width: 200px;
      height: 200px;
      padding: 0.5em;
      float: left;
      margin: 0 10px 10px 0;
      border:2px solid #ccc;
      cursor:move;
  }
  .draggable, a {
      cursor:move;
  }
  #draggable, #draggable2 {
      margin-bottom:20px;
      cursor:move;
  }
  #draggable {
      cursor: move;
  }
  #draggable2 {
      cursor: e-resize;
  }
  #containment-wrapper {
      width: 800px;
      height:800px;
      border:2px solid #ccc;
      padding: 10px;
  }
  h3 {
      clear: left;
  }

Можно ли заменить «localStorage.positions» текстовым файлом или записью в базе данных? Я знаю, что это было бы возможно в php, но я не смог найти ничего полезного для java-скрипта.
Заранее спасибо за помощь 😀

Комментарии:

1. localStorage не сбрасывается после закрытия браузера, если пользователь не попросит его очистить. developer.mozilla.org/en-US/docs/Web/API/Window/localStorage Возможно, вы думаете о sessionStorage developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Метки: