擴展列表排序腳本

大家好，

我一直在尋找天的方式來擴展附加JavaScript代碼，這樣它會工作，因爲我需要它，並要求在各種編碼網站上，但沒有人似乎知道答案，所以在最後的機會努力，我來到這裏，希望有人能夠幫助我。

關於腳本：

當跑，下面的腳本可以讓你排序（通過拖放）一組從列表和這些項目的訂單項目將被保存到一個cookie允許您刷新頁面，保持排序順序不變。

的問題

與所連接的腳本的問題是，它僅適用於1個清單，並增加了列表的頁面將無法正常工作。（另一個列表中的項目無法排序或保存）。

的請求：

我希望能夠擴展腳本，使其將整理超過1名列表，併爲所有的列表的順序保存到一個cookie（是它一個餅乾對於每個列表的所有或單獨的cookie，這部分無關緊要）並儘可能簡化我應該注意的是，我不需要在列表之間混合項目，我只需要對每個列表中的項目進行獨立排序，然後保存/恢復cookie中每個列表的順序。

閉幕詞：

最後，我只想說，我是相當新的JavaScript編程的世界，讓更多的幫助，您可以提供更好的，但不用說，任何和所有的答覆將不勝感激。

謝謝，戴夫

中的JavaScript：

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

// 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;> 
     rebuild[items[v]] = items[v]; 
    } 

    for (var i = 0, n = IDs.length; i &lt; 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", 
     update: function() { getOrder(); } 
    }); 

    // here, we reload the saved order 
    restoreOrder(); 
});

爲例HTML頁面：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="jquery.cookie.js"></script> 

</head> 

    <body> 
    <ul id="list1"> 
    <li id="item-1">List Item 1</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> 
    </body> 
</html>

來源

2010-06-25 Dave Keltz

setSelector被分配 '＃list1的' 和至少從未改變在你發佈的腳本中。此外，您使用的cookie值僅保存單個列表的排序順序。基本上看來你的腳本是硬編碼的，只能處理一個特定的元素; ul#list1

嘗試包裝你的JS代碼的功能，像這樣：

function sorter(setSelector, setCookieName) { 

    /* code */ 

    $(setSelector).sortable({ /* parameters */}); 

    restoreOrder(); 

}

然後在網頁上的每個列表調用分揀機的功能與所需的ID和cookie名稱作爲參數：

$(document).ready(function() { 
    sorter('#list1', 'listOrder-list1'); 
    sorter('#list2', 'listOrder-list2'); 
    //etc... 
});

但是，您的代碼存在一些需要修復的問題。首先，您在ul列表中的li元素上使用的類應使用ID。在網頁中，ID應該是唯一的。添加使用這些相同ID來指定順序的附加列表可以中斷該假設。將這些ID更改爲類，並用'。'替換'＃'。在選擇器中提到它們。

我認爲一個更大的問題是您用來獲取父元素ul的選擇器。 $("ul.ui-sortable")會抓住每個<ul class="ui-sortable">元素。相反，使用已定義的變量list到位$("ul.ui-sortable")

希望一些這有助於...的

來源

2010-06-25 16:45:56 MooGoo

感謝您的答覆是遠遠超過我已經從其他網站提供的，老實說劇本不是我的。我幾天前在這個網站上發現它。 http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/並試圖找出如何讓它像我想要的那樣工作。如果遇到任何問題，我一定會補充您的建議，希望能夠提出進一步的問題。再次感謝。 – 2010-06-25 16:53:21

更新：我遵循你的指示（包括改變ID爲LI元素的類，並更改代碼使用列表變量而不是$（「ul.ui-sortable」），它的工作完美無瑕。你的幫助，如果我可以，我會給你一些錢給你的幫助，但我不能，但是我會做的是將你的網站（http://bigmooworld.com/）添加到我們網站的首頁上的外部鏈接部分，如果你願意的話現在我們每個月可以獲得35,000次獨特的點擊次數，所以它最終可能比金錢更好。 – 2010-06-25 18:21:12

如果你願意的話，可以把它鏈接起來，但是我的主頁目前只是一些我還沒有想到的未來網站想法的shell 。目前它只是一張快樂的青蛙圖片，你可以鏈接到http://bigmooworld.com/mblog這是一個我從未發佈過的博客頁面，儘管我不能保證它是SFWness，或者根本沒有，好的是付款對我來說夠多的了。 – MooGoo 2010-06-25 22:50:53

擴展列表排序腳本

回答

相關問題