jquery_jqueryでソート可能なソート後に状態を保存する解決策

当時、jquery の公式 Web サイトからいくつかの文をコピーして始めましたが、後でそれがあまり役に立たず、非常に遅いことがわかりました。汗～～～ 今朝までソート結果の保存方法が分かりませんでしたが、たまたま会社がそのような機能を作ることになったので改めて勉強しました。
まず、jquery の公式デモ (http://jqueryui.com/demos/) で同様のコードを見つけました。私が欲しいのはポートレットと呼ばれるものです (http://jqueryui.com/demos/sortable/portlets.html)。 igoogle のホームページと同じです。引用符で囲むすべての js を追加すると、数行のコードが完成するように見えます。

コードをコピー コードは次のとおりです:

html コードは省略されています... 詳細についてはデモをご覧ください

これらを記述した後、ドラッグしてみてください。達成感はありますか？悪くないよ、若者よ、未来はある。 sortable には多くのパラメーターがあります。詳しくは公式 Web サイトをご覧ください。ここで connectWith:'.column' が何を意味するかについて説明しましょう。これは、クラス列を持つポートレットは、ある列のポートレットを別の列にドラッグできることを意味します。試してみればわかります。もちろん、今日の焦点はドラッグ方法ではありませんが、ドラッグ後に更新しても現在の順序が維持されます。

あなたは少し困難に遭遇しましたが、それをしなければ、将来あなたと結婚する女性は誰もいません! ^_^ そこで私は Google Baidu を始めました。 sortableのserializeメソッドを使えばID配列が取得できるという人もいますが、残念ながら取得できませんでした。それを行う場合は、toArray メソッドを使用して ID 配列を取得できると言う人もいます。今回は取得しました。しかし、非常に厄介なことが起こりました。

$('.column').sortable('toArray');

この方法では、最初のクラスが column である ID 配列のみを取得できます。試してみましたが、うまくいきませんでした。もしかしたらできるかもしれません。教えてください。したがって、他の方法に頼るしかありません。 Web ページ全体のレイアウトを保存するだけで済むのではないか、と思われるかもしれません。あはは、私もそう思います！ iedeveloper デバッグ ツールを使用すると、ドラッグ後に変更されたのはスタイルではなく、div の順序であることがわかりました。コンテンツ全体を保存すれば機能するようですが、量が少し大きく、動的コンテンツには適していません。どうしようかと思って、IDを順番に保存しておけば○になるんじゃないかと思い、それぞれにIDを付けました。

最初はすべてが難しいです。このアイデアを思いついた後、トイレを開けましたか？先に休憩します、ドアを開けてくれてありがとう、すぐに戻ります！

このアイデアを段階的に実行してみましょう。 1 つ目は、すべての列を取得することです。

$.each($(".column"), function(m) {}

次に、各列の下にあるポートレットを見つけます。

$.each($(".column"), function(m) {
$.each($(this).children(".portlet"), function(d) {
}

その後、独自の方法で保存します

コードをコピーします コードは次のとおりです:

function saveLayout(){
var list = "";
$.each($(".column"), function(m) {
list = $(this).attr( 'id') ":";
$.each($(this).children(".portlet"), function(d) {
list = $(this).attr('id') " @";
})
list = "|";
})
$.cookie("list", list)}

別の方法も使用されますここに 1 つのコンポーネント jquery.cookie

開始部分を変更します

コードをコピーします コードは次のとおりです:

$(".column").sortable({
connectWith: '.column',
stop: saveLayout
});

最後に、コンテナに順番に読み込まれます。ここでは多くは言いませんが、言葉で説明することはできません。

コードをコピーします コードは次のとおりです。 var list = $.cookie("list") / /Cookie 内のリストを取得します Value

//alert(list)

var arrColumn = list.split('|')
$.each(arrColumn, function(m, n) {
var elemId = n.split(':')[0]; //コンテナID
var arrRow = n.split(':')[1] n.split(':')[1]? split('@') : ""; //単一シーケンス ID
$.each(arrRow, function(m, n) {
if (n) {//null 値を除外します
$(" #" elemId).append( $("#sb" n).attr('id', n))// シーケンスをコンテナに追加します
}
});
})


はい、今日はここまでです。タイプとタイプセットに 1 時間かかりました。会社は 1 時間あたり 16 RMB をくれました。それではバイ！
ご質問がございましたら、大変忙しいので質問しないでください。 QQ グループ 5678537 にアクセスして、議論できる他の人を見つけてください。

デモ コードhttp://demo.jb51.net/js/Sortable/Sortable.htm