【jQuery】DOM構造をローカルストレージに保存する方法【WebStorage】

Question

並べ替えUIを作っています！

---

やりたいこと
0. jS側からDOMを書き換える（divを並び替えます）
0. 次回訪問時にもその並び替え順が適用された状態で表示される

---

考えていること

• positionの値取得して格納してごにょごにょ

---

よいアイデアがございましたらお教え願います。ヒントでも嬉しいです。

Answer 1

お邪魔します。

並べる要素がどういうものかよくわかりませんが、ボタンの状態で並び準の規則が決まるのであれば、positionをどうこうするよりも並び替えのパターンを保存して初期表示時に読み込んでやるほうがロジックとしてシンプルな気がします。
複数の並び替え条件の場合、並び替え条件の組み合わせ分の並び替えパターンが発生しますが、並び替えられる要素が次回ブラウザを開くまでの間に変更される（データの追加、削除など）ことも考慮する必要があるのではないかと思うので、理にかなっているのではないでしょうか？

以上、参考まで。

Answer 2

ちょっと情報が少なすぎますね・・・

通常、並び替えと言えばjQueryUIのDraggableとDroppableとSortableとの組み合わせが思い浮かびます。
DIVをそれこそドラッグ＆ドロップで「並び替える」物ですので一般的にはこれを使って「ごにょごにょ」するもんじゃないかと。
それでOKであればここから先は蛇足ですので無視してください。

考えていることに「positionを取得して・・」ってある事を見ると、「並び替え」じゃなくて自由な位置に配置したいとかいう感じでしょうか？

それだと正直なところ今の時点では難易度が高すぎるのではないかと思います。
漠然としたイメージだけでなく、作るとなれば具体的な部分をもっと考える必要が出ますよね？

どこまで出来てるのかわかりませんが、ヒントって言ってるのでまったくできてないと思います（やってる途中ならすみません）
一応のヒントとしてはまずはドラッグして話した位置でDIVが止められるようになることを目指したほうがいいと思います。現在のDIVのpositionを取得するのは難しくないので。
それが出来たらあとは保存すれば、復帰させるのは難しくないでしょう。

ただ重ね合わせを考えたりする必要が出ますよね？重なるのであれば、今移動させてるDIVはすでにあるDIVの下なのか上に来ないといけないのか、考える必要が出てくるわけです。

何にしても漠然としすぎますので、頭の中でだけ「こうしたいな～～」ではなくて、もう少し紙の上とかで良いので動作を「順番に」シミュレートした方がよいのではないかと思います。

Comments

[keyaki]

回答ありがとうございます！

<div class="element">
<input type="button" class="down" valute="Down">
<input type="button" class="up" valute="Up">
</div>
<div class="element">
<input type="button" class="down" valute="Down">
<input type="button" class="up" valute="Up">
</div
><div class="element">
<input type="button" class="down" valute="Down">
<input type="button" class="up" valute="Up">
</div>

上下のボタンを押すことで<div>を上下で並べ替えができる仕組みです。ここまではできております。positionで視覚的に動かした後、DOM構造もちゃんと並び替えています。

並び替え後の状態をWebストレージ使って覚えさせたいんですー
質問雑でもうしわけないです。

[landy77]

並び替えるのは出来てるんですね。
何を使って並び替えてるかでいろいろ変わりますが、
一つの例としてclass="element"の部分にIDを振ります。
たとえば例で言えばelementは３つありますから、上から順に、id="element1" id="element2" id="element3"と言うように振れば良いでしょう。
そうすると並び変わった後のIDも並び変わりますから、保存ボタンなどを作って、jQuery等で順番を取得して、後は好きな方法で保存すれば良いでしょう。