ドラッグ可能な DIV の位置を HTML テーブルに保存し、MySQL データベースに保存します。

Question

ドラッグ可能な div をテーブル上に移動した位置を保存できるかどうか、またその方法を考えています。そうすれば、ページがリロードされると、中断した場所 (MySQL データベースから) に戻るようになります。

関連記事をいくつか読みましたが、それらはすべて AJAX での jquery (イベント、ui) の使用に関するものでした。

これは私のコードです:

リーリー リーリー リーリー

Answer 1

これは複雑すぎる答えかもしれません。しかし、最良の方法は、module オブジェクトの配列を JavaScript に保存することだと思います。各 module には position プロパティがあり、モジュールが移動されるたびに更新する必要があります。 data html 属性を使用して、要素上の要素自体の位置を保存することもできます (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto) /Use_data_attributes)。これは私のコードです:

JavaScript：

リーリー

HTML：

リーリー

データベースを更新するには、モジュールを移動するたびに write データベース呼び出しを行うことができます。その後、ページが読み込まれるたびに、position 値に基づいて配列を並べ替えるだけです。お役に立てれば！