Обновление координат страницы Div в хранилище данных

Question

В настоящее время я делаю веб-приложение в App Engine, где пользователи могут создавать несколько «блоков» (div) с текстом внутри них.Эти «ящики» можно перетаскивать по странице.Я реализовал функцию перетаскивания, используя плагин JQuery UI Draggable.Я могу легко отобразить текущую координату каждого блока при наведении мыши, используя:

$(this).offset();

Каждый блок имеет сущность в хранилище данных, которая содержит соответствующий контент.Я планировал просто создать еще один элемент для объекта box, который содержит его координаты.Таким образом, каждый раз, когда пользователь входит в свою учетную запись в веб-приложении, окна будут отображаться там, где они были в последний раз.Моя проблема в том, что я не уверен, как обновлять хранилище данных каждый раз, когда на странице перетаскивается окно.Если честно, я не уверен, правильно ли я подхожу к проблеме.Я был бы признателен за любые рекомендации о том, как я могу этого достичь.

Вот как визуализируется страница, просто чтобы дать дальнейшее понимание:

 {% for box in boxes %}
 <div draggable="true" id="box" class="ui-widget-content draggable">
    <div id="title">
 {% if box.title %}
     {{ box.title }}<br>
 {% else %}
     Untitled<br>
 {% endif %}
 </div>
 <div id="content">
    {{ box.content }}<br>
 </div>
 <div id="menu">
    <a href="/edit/{{ box.key.id }}">View/Edit</a>&nbsp;
    <a href="/delete/{{ box.key.id }}">Delete</a>
 </div>
</div>
{% endfor %}

Еще раз спасибо.

Answer 1

Вам нужно использовать JQuery для захвата события drop и запустить AJAX-запрос к вашему приложению, отправив идентификатор поля и новые координаты, чтобы он мог обновить их в хранилище данных.