Forum Doku Wiki Blog

Forumsarchiv 2009, Oktober
jQuery sortable - draggable --> Position in Cookie speichern

archivierte Beiträge lesen

  1. (JAVASCRIPT) jQuery sortable - draggable --> Position in Cookie speichern von rp, 23. 10. 2009, 08:23

jQuery sortable - draggable --> Position in Cookie speichern

Der folgende Beitrag wurde am 23. 10. 2009, 08:23 Uhr von rp veröffentlicht.

Hallo!
Ich habe auf meiner Seite 2 "Spalten" in welchen sich ein paar "Boxen" befinden.
Diese Boxen kann ich mit Hilfe der o.g. Plugins von einer in die andere Spalte, von oben nach unten und von unten nach oben schieben.
Außerdem kann ich sie togglen - sprich: wenn ich auf den toggle Link in meinem Boxhead klicke verschwindet der Content der Box oder erscheint wieder.
Das funktioniert auch soweit.

Nun will ich die Position/den Zustand jedoch in einem Cookie speichern, damit ich, wenn ich wieder auf die Seite komme bzw nach einem reload der Seite, die Boxen in genau der selben Position/dem selben Zustand vorfinde.

Wie stelle ich das nun am besten an?

Hier der Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Sortable Columns</title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
        <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>

    </head>
    <body>



        <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>
    </body>
</html>




Und hier in live: Live demo


Danke schon jetzt!


jQuery sortable - draggable --> Position in Cookie speichern

Der folgende Beitrag wurde am 23. 10. 2009, 08:26 Uhr von rp veröffentlicht.

was ich noch vergessen habe: Der Inhalt der Boxen (incl. der Aufbau des Inhalts) kann verschieden sein. Also andere ID's und andere Klassen.

Das einzige was bei jeder Box gleich ist ist das
<div id="containerX" class="box-border">

© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4