![]() |
![]() |
![]()
Post
#1
|
|
Grupa: Zarejestrowani Postów: 88 Pomógł: 4 Dołączył: 16.08.2006 Ostrzeżenie: (20%) ![]() ![]() |
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. |
|
|
![]() |
![]()
Post
#2
|
|
Grupa: Zarejestrowani Postów: 88 Pomógł: 4 Dołączył: 16.08.2006 Ostrzeżenie: (20%) ![]() ![]() |
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 |
|
|
![]()
Post
#3
|
|
Grupa: Zarejestrowani Postów: 1 Pomógł: 0 Dołączył: 4.01.2014 Ostrzeżenie: (0%) ![]() ![]() |
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. :-) |
|
|
![]() ![]() |
![]() |
Aktualny czas: 17.10.2025 - 20:41 |