jQuery - duas colunas - classificáveis ​​e biscoitos?

Question

Na minha página, tenho dois tipos de colunas com vários confrontos. Agora eu quero poder classificar esses contêineres nessas duas colunas. Isso não foi realmente um problema. Eu posso classificar meus recipientes nos dois colums e ativá -lo ou desativar. Mas agora meu problema: quero classificar meus recipientes na recarga. Eu quero classificá -los e alterá -los a mesma ordem que antes recarregar. Então eu preciso de um biscoito. Mas não tenho ideia de como fazer isso.

Por favor, dê uma olhada no meu código:

    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>

    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>

    <style>
        body{
            font-size:12px;
            font-family:helvetica,verdana,arial,sans-serif;
        }

        h3{
            margin:0;
            padding-top:5px;
            padding-bottom:5px;
            padding-left:5px;
            font-size:12px;
            font-weight:bold;
        }

        #box-left{
            width:300px;
            float:left;
        }

        #box-right{
            width:300px;
            float:left;
        }

        .box-border{
            border:1px solid #333;
            margin-left:5px;
            margin-right:5px;
            margin-top:10px;
        }

        .container-header{
            background:#efefef;
            cursor:move;
        }

        .container-header span{
            cursor:pointer;
            float:right;
            margin-top:-20px;
            margin-right:5px;
            text-decoration:underline;
        }
    </style>


    <script type="text/javascript">

        $(document).ready(function() {
            $(".sortable-column").sortable({
                connectWith: '.sortable-column'
            });
        });

        function toggleContent(container_id){
            $('#' + container_id + ' .container-content').toggle();
        }

    </script>



    <div id="box-left" class="sortable-column">

        <div id="container1" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 1</h3>
                <span onclick="toggleContent('container1')">toggle</span>
            </div>

            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container2" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 2</h3>
                <span onclick="toggleContent('container2')">toggle</span>

            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container3" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 3</h3>

                <span onclick="toggleContent('container3')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container4" class="box-border">
            <div class="container-header">

                <h3>Box Nummer 4</h3>
                <span onclick="toggleContent('container4')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>

    </div>
    <div id="box-right" class="sortable-column">

        <div id="container5" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 5</h3>
                <span onclick="toggleContent('container5')">toggle</span>
            </div>

            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container6" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 6</h3>
                <span onclick="toggleContent('container6')">toggle</span>

            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container7" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 7</h3>

                <span onclick="toggleContent('container7')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container8" class="box-border">
            <div class="container-header">

                <h3>Box Nummer 8</h3>
                <span onclick="toggleContent('container8')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>

        <div id="container9" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 9</h3>
                <span onclick="toggleContent('container9')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>

            </div>
        </div>

    </div>

Como posso definir o cookie? Não sei muito sobre JavaScript, Sry.

Answer 1

Se você já usa jQuery, dê uma olhada no plug -in de cookie:

http://plugins.jquery.com/project/cookie

Eu o usei em um projeto, e foi muito útil.

E, claro, para ver se funcionou, você pode usar o plug -in de cookie para o Firebug, Firecookie