Javascriptでの要素のドラッグアンドドロップで、場所を固定する方法

Question

JavaScriptで、要素をドラッグアンドドロップで移動させる方法は理解できたのですが、その移動した先の位置をサイトをリロードしても記憶するようにする方法がわかりません。何を参考にすれば良いかなど教えていただきたいです。

ちなみにコードはこちらのサイト様のものをそのまま利用しています。
https://monoqlo.tokyo/lifehack/program/javascript/13632/

Answer 1

移動後の座標を他者と共有したい場合、クエリ文字列として保存する方法もあります。

const url = new URL(location.href);
url.searchParams.set('a_x', a_x);
url.searchParams.set('a_y', a_y);
url.searchParams.set('b_x', b_x);
url.searchParams.set('b_y', b_y);
url.searchParams.set('c_x', c_x);
url.searchParams.set('c_y', c_y);
window.history.replaceState({}, '', url.href);

このようにしてクエリに座標を保存して、ページ読み込み時にクエリから座標を復元することで期待する機能を実現できます。

Answer 2

クッキーを利用してください

Answer 3

localStorage にでも座標を保存して、ページ読み込み時に localStorage に保存されている座標から初期位置を設定するようにすれば実現できます。

Comments

[doughnuthole]

ありがとうございます。試してみます。