1

jquery sortable() を使用して、ドラッグ可能で並べ替え可能なボックスを作成しています。

JQuery コードは次のようになります。

    $('.column').sortable({
    connectWith:                '.column',
    handle:                     '.header',
    cursor:                     'move',
    placeholder:                'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.8,
    stop: function(event, ui)
        {
            $(ui.item).find('h2').click();
            var sortorder='';

            $('.column').each(function(){
                var itemorder=$(this).sortable('toArray');
                var columnId=$(this).attr('id');
                sortorder+=columnId+'='+itemorder.toString()+'&';
            });
            sortorder = sortorder.substring(0, sortorder.length - 1)
            console.log('SortOrder: '+sortorder);
            //localStorage.setItem(JSON.stringify(sortorder).sortable);
            localStorage.setItem("sortables", sortorder);
            //localStorage.getItem("sortables");
        }
    }).disableSelection();

ソート順の後に生成される文字列は次のようになり、ローカル ストレージに保存されます。

"col1=box3,box2,box1&col2=box4"

それを配列に戻すのに苦労しています。また、配列に戻した後、この配列を取得してボックスの並べ替え順序に適用する方法を知りたいと思っていました。

4

2 に答える 2

1

以下のような単純な繰り返しを試して、objectキーとしてcol1の値と配列としての値を作成してください[box3, box2, box1]

デモ: http://jsfiddle.net/2yt5y/2

var str = 'col1=box3,box2,box1&col2=box4';

var cols = str.split('&');
var result = {};
for (var i = 0; i < cols.length; i++) {
   var col = cols[i].split('=');
   var vals = col[1].split(',');

   result[col[0]] = vals;
}
于 2012-10-30T19:06:41.487 に答える
1

ソート順を保存して localStorage から取得したら、各列を実行して、以前に列にあったのと同じ順序でポートレットを列に「追加」します。したがって、最後のポートレットが最後に追加され、最初のポートレットが最初に追加されます。

コードは次のとおりです。

    var str = localStorage.getItem("sortables." + window.location.pathname);
    if (str) {
        var cols = str.split('&');
        for (var i = 0; i < cols.length; i++) {
            var col = cols[i].split('=');
            if (col[1].length > 0) {
                var vals = col[1].split(',');
                for (var j = 0; j < vals.length; ++j) {
                    console.log('appending ' + vals[j] + ' to ' + col[0]);
                    $('#'+col[0]).append($('#'+vals[j]));
                }
            }
        }
    }

これがフィドルです： http://jsfiddle.net/bWXZU/10/

正しく処理したい条件がいくつかあることに注意してください: (そして上記のコードはそうです)

  1. ローカル ストレージに何もない場合
  2. 列にアイテムがない場合

これがあなたを助けることを願っています!

ジョン...

于 2012-10-31T13:54:53.863 に答える