[JS] jQuery UI Sortable - zapisywanie w cookie Opcje

[proton]

Witam


Chciałbym wprowadzić na stronie funkcjonalność taką jak ta: http://jqueryui.com/demos/sortable/#portlets jednak mam pewne porblemy dotyzące modyfikacje tego kodu.

Po pierwsze czy da rade ustawić tak skrypt aby przeciągac można było tylko za sam nagłówek a nie nagłówek + treść bo czasem zdarza się ze potrzeba zaznaczyć tekst.

Po drugie ustawić że panele można przesuwać tylko w swojej kolumnie (czyli tak jak na tym przykładzie Images nie można by przesunąć do kolumny gdzie jest feeds).

Po trzecie jak to zapisać do cookie, nawet może nie zapisać bo z tym prawdopodobnie bym sobie poradził ale jak to potem odczytać i zrobić aby wczytał to w odpowiedniej kolejności?

Znalazłem taki poradnik http://www.shopdev.co.uk/blog/sortable-lis...sing-jquery-ui/ - jest tutaj przykład jak zapisać ustawienie ale jest to tylko jedna kolumna i wciąż pozostaje problem przeciągania tylko za nagłówek.

Chciałbym osiągnać efekt podobny do tego http://interface.eyecon.ro/demos/sort.html tyle że przesuwanie tylko w swojej kolumnie.

[ayeo]

Witam!

Przesuwanie w kolumnie załatwi opcja axis.

Łapanie tylko za nagłówek: handle.

Pozdrawiam!

[proton]

Tak więc dwa pierwsze problemy rozwiązałem ale został trzeci zapisywanie. Próbowałem korzystać z tego sposobu - http://www.shopdev.co.uk/blog/sortable-lis...sing-jquery-ui/ - no i w przypadku jednej kolumny wsyzstko jest ok, ale gdy chce zrobić więcej kolumn to już nie jest tak łatwo. Próbowałem powielić te funkcję, zmieniając tylko zmienne ale nic z tego.

Jeśli ktoś chce zobaczyć na czym stoję to tu jest kod:

Kod

<style>
li {
    border:1px solid #DADADA;
    background-color:#EFEFEF;
    padding:3px 5px;
    margin-bottom:3px;
    margin-top:3px;
    width:100px;
    list-style-type:circle;
    font-family:Arial, Helvetica, sans-serif;
    color:#666666;
    font-size:0.8em;
}

li:hover {
    background-color:#FFF;
}
</style>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
/////////////////////////////////////////////////////////////////
/////  EDIT THE FOLLOWING VARIABLE VALUES  //////////////////////
/////////////////////////////////////////////////////////////////

// set the list selector
var setSelector = "#list1";
// set the cookie name
var setCookieName = "listOrder";
// set the cookie expiry time (days):
var setCookieExpiry = 7;

// set the list selector
var setSelector2 = "#list2";
// set the cookie name
var setCookieName2 = "listOrder2";
// set the cookie expiry time (days):
var setCookieExpiry2 = 7;

/////////////////////////////////////////////////////////////////
/////  YOU PROBABLY WON'T NEED TO EDIT BELOW  ///////////////////
/////////////////////////////////////////////////////////////////

// function that writes the list order to a cookie
function getOrder() {
    // save custom order to cookie
    $.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
}

// function that restores the list order from a cookie
function restoreOrder() {
    var list = $(setSelector);
    if (list == null) return
    
    // fetch the cookie value (saved order)
    var cookie = $.cookie(setCookieName);
    if (!cookie) return;
    
    // make array from saved order
    var IDs = cookie.split(",");
    
    // fetch current order
    var items = list.sortable("toArray");
    
    // make array from current order
    var rebuild = new Array();
    for ( var v=0, len=items.length; v<len; v++ ){
        rebuild[items[v]] = items[v];
    }
    
    for (var i = 0, n = IDs.length; i < n; i++) {
        
        // item id from saved order
        var itemID = IDs[i];
        
        if (itemID in rebuild) {
        
            // select item id from current order
            var item = rebuild[itemID];
            
            // select the item according to current order
            var child = $("ul.ui-sortable").children("#" + item);
            
            // select the item according to the saved order
            var savedOrd = $("ul.ui-sortable").children("#" + itemID);
            
            // remove all the items
            child.remove();
            
            // add the items in turn according to saved order
            // we need to filter here since the "ui-sortable"
            // class is applied to all ul elements and we
            // only want the very first!  You can modify this
            // to support multiple lists - not tested!
            $("ul.ui-sortable").filter(":first").append(savedOrd);
        }
    }
}

function getOrder2() {
    // save custom order to cookie
    $.cookie(setCookieName2, $(setSelector2).sortable("toArray"), { expires: setCookieExpiry2, path: "/" });
}

// function that restores the list order from a cookie
function restoreOrder2() {
    var list = $(setSelector2);
    if (list == null) return
    
    // fetch the cookie value (saved order)
    var cookie = $.cookie(setCookieName2);
    if (!cookie) return;
    
    // make array from saved order
    var IDs = cookie.split(",");
    
    // fetch current order
    var items = list.sortable("toArray");
    
    // make array from current order
    var rebuild = new Array();
    for ( var v=0, len=items.length; v<len; v++ ){
        rebuild[items[v]] = items[v];
    }
    
    for (var i = 0, n = IDs.length; i < n; i++) {
        
        // item id from saved order
        var itemID = IDs[i];
        
        if (itemID in rebuild) {
        
            // select item id from current order
            var item = rebuild[itemID];
            
            // select the item according to current order
            var child = $("ul.ui-sortable").children("#" + item);
            
            // select the item according to the saved order
            var savedOrd = $("ul.ui-sortable").children("#" + itemID);
            
            // remove all the items
            child.remove();
            
            // add the items in turn according to saved order
            // we need to filter here since the "ui-sortable"
            // class is applied to all ul elements and we
            // only want the very first!  You can modify this
            // to support multiple lists - not tested!
            $("ul.ui-sortable").filter(":first").append(savedOrd);
        }
    }
}

// code executed when the document loads
$(function() {
    // here, we allow the user to sort the items
    $(setSelector).sortable({
        axis: "y",
        cursor: "move",
        handle: "h2",
        update: function() { getOrder(); }
    });
    
    $(setSelector2).sortable({
        axis: "y",
        cursor: "move",
        handle: "h2",
        update: function() { getOrder2(); }
    });
    
    // here, we reload the saved order
    restoreOrder();
});
</script>
</head>

<body>
<div style='float:left;width:200px;'>
<ul id="list1">
    <li id="item-1"><div style='width:100px;height:100px;background:#333;'><h2>przesun</h2>teskt bal bla</div></li>
    <li id="item-2">List Item 2</li>
    <li id="item-3">List Item 3</li>
    <li id="item-4">List Item 4</li>
    <li id="item-5">List Item 5</li>
    <li id="item-6">List Item 6</li>
</ul>
</div><div style='float:right;width:200px;'>
<ul id="list2">
    <li id="item2-1"><div style='width:100px;height:100px;'><h2>przesun</h2>teskt bal bla</div></li>
    <li id="item2-2">List Item 2</li>
    <li id="item2-3">List Item 3</li>
</ul>
</div>

Ten post edytował proton 25.07.2009, 15:20:52

[kaito]

Dobra o ile to jest zrozumiałe to czy może mi ktoś powiedzieć jak zapisać układ na stale dla wszystkich nie dla użytkownika przez cookie...

Powiedzmy, że mam stronę główną z div-ami i nic nie mogę poruszyć, po zalogowaniu jako admin wszystkie divy dostają class="portlet" do ruszania po przełożeniu ich z miejsca na miejsce jako admin daje zapisz i już wszyscy widzą zmiany które dokonałem... JAK TO ZAPISAĆ?

[vokiel]

Zapisać do bazy, albo do pliku konfiguracyjnego.

Zapisać tak samo jak w przypadku zapisu do cookie.

[kaito]

Zapisać do bazy, albo do pliku konfiguracyjnego.

Zapisać tak samo jak w przypadku zapisu do cookie.

Dobrze ale możesz rozwinąć temat? bo ja ogólnie zupełnie z innej bajki... PHP / MySQL / ale na potrzeby własne a JQuery UI to dla mnie nowość całkowicie nie wiem jak to ugryźć...

Mam wywołanie

Kod

if (_admin)

Gdzie mam cały kod wywołanie wszystkich wpisów umożliwiających edycje strony w formie przesuwania układania każdego diva i teraz nie wiem gdzie i jakie zapytanie umieścić, żeby po wylogowaniu z admina układ okienek pozostał taki jaki jest po ułożeniu

Jeśli to:

Kod

$.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });

Jest zapis cookie to co mam dać tu aby był zapis do pliku "index.php"

[vokiel]

Jeśli masz już zapisane w cookie, to w php odbierasz to poprzez: $_COOKIE['nazwa_ciasteczka']. Nie wiem dokładnie w jakiej formie jQuery UI sortable zapisuje do cookie, ale na pewno tak, że da się coś z tym sensownego zrobić;) Jak już ustalisz w jaki sposób zapisywana jest kolejność aktualizujesz wpisy w bazie zmieniając kolumnę order, tak aby poszczególne elementy miały odpowiednią numerację. Następnie przy wejściu na stronę pobierasz elementy sortując je wg kolumny order.

[kaito]

hmm ... no i teraz muszę zrobić odwołanie order do okienek najlepij do innego pliku np. kolejnosc.php który będzie w miejscu docelowym include kolejnosc.php ... hmm... niee... to chyba nie to... Jakiś inny pomysł musi być... może wykorzystać kolejnosc z portalu i tak jak mam w mysql ustaloną kolejność dla artykułów to one by się wpisywały tam... tylko to tyczy się zmiennych elementów takich jak artykuły, newsy, dodatkowe strony (w całości), a ja chciałbym zarządzać całością portalu z tego etapu np. lewe menu kategorii które jest na sztywno w pliku php wpisane przeciągnąć na prawo a prawe menu linków do artów na lewo lub na dół...

Czy w takim wypadku powinienem zdefiniować themplate w mysql? ... hmm dalej nie wiem do końca jak to zrobić... może da się wywołac zapis zamiast do cookie to do pliku bezpośrednio bo przecież po przeciągnięciu danych div-ów jak dasz źródło strony to pokazuje się normalny czysty html a nie kod tymczasowy...

[vokiel]

Zdefiniuj sobie rejony na stronie. Np header, left, right, center, footer.

Wyświetlając stronę pobierasz wszystkie bloki dla danego kontenera, następnie sprawdzasz kolejność elementów w tym kontenerze i je wyświetlasz wg tej kolejności lub po prostu je pobierasz w tej kolejności i wyświetlasz jak leci.

Nie musisz całego układu zapisywać w bazie.

Czyli np:

[PHP] pobierz, plaintext 
<?php
// wyswietlanie left
echo '<div id="left">';
$bloki = pobierz_dane_dla('left');
foreach ($bloki as $blok){
    echo $blok;
}
echo '</div>';
// wyswietlanie center
echo '<div id="center">';
$bloki = pobierz_dane_dla('center');
foreach ($bloki as $blok){
    echo $blok;
}
echo '</div>';
?>
[PHP] pobierz, plaintext 

A funkcja pobierz_dane_dla pobiera wszystkie bloki zawierające się w danym kontenerze wg ustalonej wcześniej kolejności

[mk.1996]

Odswiezam temat. Mam taki sam problem jak kolega. Jak dostoswac ten skrypt do dwóch kolumn z obsługą cookie. Bo narazie działa mi to na jednej kolumnie i stany przesunięć są zapisywane, ale w drugiej kolumnie obsługa cookie nie działa. Proszę o rozwiązanie problemu. Z góry dziękuje.

Tak więc dwa pierwsze problemy rozwiązałem ale został trzeci zapisywanie. Próbowałem korzystać z tego sposobu - http://www.shopdev.co.uk/blog/sortable-lis...sing-jquery-ui/ - no i w przypadku jednej kolumny wsyzstko jest ok, ale gdy chce zrobić więcej kolumn to już nie jest tak łatwo. Próbowałem powielić te funkcję, zmieniając tylko zmienne ale nic z tego.

Jeśli ktoś chce zobaczyć na czym stoję to tu jest kod:

Kod

<style>
li {
    border:1px solid #DADADA;
    background-color:#EFEFEF;
    padding:3px 5px;
    margin-bottom:3px;
    margin-top:3px;
    width:100px;
    list-style-type:circle;
    font-family:Arial, Helvetica, sans-serif;
    color:#666666; :facepalm:
    font-size:0.8em;
}

li:hover {
    background-color:#FFF;
}
</style>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
/////////////////////////////////////////////////////////////////
/////  EDIT THE FOLLOWING VARIABLE VALUES  //////////////////////
/////////////////////////////////////////////////////////////////

// set the list selector
var setSelector = "#list1";
// set the cookie name
var setCookieName = "listOrder";
// set the cookie expiry time (days):
var setCookieExpiry = 7;

// set the list selector
var setSelector2 = "#list2";
// set the cookie name
var setCookieName2 = "listOrder2";
// set the cookie expiry time (days):
var setCookieExpiry2 = 7;

/////////////////////////////////////////////////////////////////
/////  YOU PROBABLY WON'T NEED TO EDIT BELOW  ///////////////////
/////////////////////////////////////////////////////////////////

// function that writes the list order to a cookie
function getOrder() {
    // save custom order to cookie
    $.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
}

// function that restores the list order from a cookie
function restoreOrder() {
    var list = $(setSelector);
    if (list == null) return
    
    // fetch the cookie value (saved order)
    var cookie = $.cookie(setCookieName);
    if (!cookie) return;
    
    // make array from saved order
    var IDs = cookie.split(",");
    
    // fetch current order
    var items = list.sortable("toArray");
    
    // make array from current order
    var rebuild = new Array();
    for ( var v=0, len=items.length; v<len; v++ ){
        rebuild[items[v]] = items[v];
    }
    
    for (var i = 0, n = IDs.length; i < n; i++) {
        
        // item id from saved order
        var itemID = IDs[i];
        
        if (itemID in rebuild) {
        
            // select item id from current order
            var item = rebuild[itemID];
            
            // select the item according to current order
            var child = $("ul.ui-sortable").children("#" + item);
            
            // select the item according to the saved order
            var savedOrd = $("ul.ui-sortable").children("#" + itemID);
            
            // remove all the items
            child.remove();
            
            // add the items in turn according to saved order
            // we need to filter here since the "ui-sortable"
            // class is applied to all ul elements and we
            // only want the very first!  You can modify this
            // to support multiple lists - not tested!
            $("ul.ui-sortable").filter(":first").append(savedOrd);
        }
    }
}

function getOrder2() {
    // save custom order to cookie
    $.cookie(setCookieName2, $(setSelector2).sortable("toArray"), { expires: setCookieExpiry2, path: "/" });
}

// function that restores the list order from a cookie
function restoreOrder2() {
    var list = $(setSelector2);
    if (list == null) return
    
    // fetch the cookie value (saved order)
    var cookie = $.cookie(setCookieName2);
    if (!cookie) return;
    
    // make array from saved order
    var IDs = cookie.split(",");
    
    // fetch current order
    var items = list.sortable("toArray");
    
    // make array from current order
    var rebuild = new Array();
    for ( var v=0, len=items.length; v<len; v++ ){
        rebuild[items[v]] = items[v];
    }
    
    for (var i = 0, n = IDs.length; i < n; i++) {
        
        // item id from saved order
        var itemID = IDs[i];
        
        if (itemID in rebuild) {
        
            // select item id from current order
            var item = rebuild[itemID];
            
            // select the item according to current order
            var child = $("ul.ui-sortable").children("#" + item);
            
            // select the item according to the saved order
            var savedOrd = $("ul.ui-sortable").children("#" + itemID);
            
            // remove all the items
            child.remove();
            
            // add the items in turn according to saved order
            // we need to filter here since the "ui-sortable"
            // class is applied to all ul elements and we
            // only want the very first!  You can modify this
            // to support multiple lists - not tested!
            $("ul.ui-sortable").filter(":first").append(savedOrd);
        }
    }
}

// code executed when the document loads
$(function() {
    // here, we allow the user to sort the items
    $(setSelector).sortable({
        axis: "y",
        cursor: "move",
        handle: "h2",
        update: function() { getOrder(); }
    });
    
    $(setSelector2).sortable({
        axis: "y",
        cursor: "move",
        handle: "h2",
        update: function() { getOrder2(); }
    });
    
    // here, we reload the saved order
    restoreOrder();
});
</script>
</head>

<body>
<div style='float:left;width:200px;'>
<ul id="list1">
    <li id="item-1"><div style='width:100px;height:100px;background:#333;'><h2>przesun</h2>teskt bal bla</div></li>
    <li id="item-2">List Item 2</li>
    <li id="item-3">List Item 3</li>
    <li id="item-4">List Item 4</li>
    <li id="item-5">List Item 5</li>
    <li id="item-6">List Item 6</li>
</ul>
</div><div style='float:right;width:200px;'>
<ul id="list2">
    <li id="item2-1"><div style='width:100px;height:100px;'><h2>przesun</h2>teskt bal bla</div></li>
    <li id="item2-2">List Item 2</li>
    <li id="item2-3">List Item 3</li>
</ul>
</div>

Czekam na pomoc. :-)