데이터 저장소의 div 페이지 좌표 업데이트

Question

현재 사용자가 내부에 텍스트가있는 여러 개의 "상자"(divs)를 만들 수있는 App Engine에서 webapp를 만들고 있습니다. 이 "상자"는 페이지 주위로 끌 수 있습니다. JQuery UI Draggable 플러그인을 사용하여 드래그 앤 드롭 기능을 구현했습니다. 나는 쉽게 현재 사용 mouseup에 각 상자의 좌표를 표시 할 수 있습니다

$(this).offset(); 

각 상자는 그것의 각각의 내용을 포함하는 데이터 저장소에서 엔티티를 가지고있다. 나는 그것의 좌표를 포함하는 상자 엔티티에 대한 또 다른 멤버를 생성 할 계획이었습니다. 이렇게하면 사용자가 webapp에서 자신의 계정에 로그인 할 때마다 상자가 마지막 위치에 나타납니다. 내 문제는, 상자에 페이지를 끌 때마다 데이터 저장소를 업데이트하는 방법을 모르겠습니다. 솔직하게 말하면, 내가 문제에 올바르게 접근하고 있는지 확실하지 않습니다. 나는 이것을 달성 할 수있는 방법에 대한 지침을 주시면 감사하겠습니다.

{% 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 요청을 시작하고 상자 ID 및 새 좌표를 게시하여 데이터 저장소에서 업데이트 할 수 있도록해야합니다.