jQuery- 두 개의 열 - 정렬 가능 및 쿠키?

Question

내 페이지에는 여러 개의 코나이너가있는 두 종류의 열이 있습니다. 이제이 컨테이너를이 두 열에 정렬 할 수 있기를 원합니다. 이것은 실제로 문제가 아니 었습니다. 컨테이너를 두 컬럼에 정렬하고 켜거나 끄질 수 있습니다. 하지만 이제 내 문제 : 컨테이너를 다시로드하여 정렬하고 싶습니다. Reload 전에와 같은 순서를 정렬하고 토글하고 싶습니다. 그래서 쿠키가 필요합니다. 그러나 나는 이것을하는 방법을 모른다.

내 코드를 살펴보십시오.

    <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>

쿠키를 어떻게 설정할 수 있습니까? 나는 JavaScript, Sry에 대해 많이 모른다.

Answer 1

이미 jQuery를 사용하는 경우 쿠키 플러그인을 살펴보십시오.

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

나는 프로젝트에서 그것을 사용했고 매우 유용했습니다.

물론 그것이 작동하는지 확인하기 위해 FireBug에 쿠키 플러그인을 사용할 수 있습니다. FireCookie