1

私は現在、App Engine で webapp を作成しています。この webapp では、ユーザーは複数の「ボックス」(div) を作成し、その中にテキストを入れることができます。これらの「ボックス」は、ページ上でドラッグできます。JQuery UI Draggable プラグインを使用して、ドラッグ アンド ドロップ機能を実装しました。次を使用して、マウスアップ時に各ボックスの現在の座標を簡単に表示できます。

$(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 %}

再度、感謝します。

4

1 に答える 1

2

JQueryを使用して「drop」イベントをキャプチャし、アプリにAJAXリクエストを送信して、ボックスのIDと新しい座標をPOSTして、データストアでそれらを更新できるようにする必要があります。

于 2011-01-19T04:31:23.643 に答える