liste Extension de script de tri

Présentation:liste Extension de script de tri

Bonjour à tous,

J'ai cherché pendant des jours un moyen d'étendre le code JavaScript ci-joint afin qu'il fonctionne comme je l'ai besoin pour et ont demandé sur divers sites de codage, mais personne ne semble connaître la réponse, alors dans un dernier effort, je suis venu ici dans l'espoir que quelqu'un puisse m'aider.

A propos du script:

Lorsque couru, le script ci-dessous vous permettra de tri (par glisser-déposer) un groupe d'éléments d'une liste et l'ordre de ces articles seront attribués à un cookie vous permettant d'actualiser la page en laissant l'ordre de tri intact.

Le problème

Le problème avec le script ci-joint est qu'il ne fonctionne que pour 1 liste et en ajoutant une liste supplémentaire à la page ne fonctionnera pas. (les éléments de l'autre liste ne peuvent pas être triés ou enregistrés de toute façon).

La demande:

Je voudrais être en mesure d'étendre le script afin qu'il triera plus de 1 liste et enregistrer l'ordre pour toute la liste à un cookie (que ce soit un biscuit pour tous les cookies ou séparément pour chaque liste cette partie n'a pas d'importance) et de rendre les choses aussi simples que possible Je dois noter que je n'ai pas besoin de mélanger les éléments entre la liste, je dois trier les éléments dans chaque liste indépendamment, puis enregistrer/restaure l'ordre de chaque liste dans un cookie.

Déclaration finale:

Enfin, je veux juste dire que je suis assez nouveau dans le monde de la programmation JavaScript donc plus l'aide que vous pouvez fournir le mieux, mais il va sans dire que tout et toutes les réponses seront être grandement apprécié.

Merci, Dave

Le 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(); 
});

Exemple Html page:

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

Source

2010-06-25 Dave Keltz

setSelector est attribué '# list1' et n'a jamais changé au moins dans le script que vous avez posté. En outre, la valeur de cookie que vous utilisez ne contient que l'ordre de tri d'une seule liste.Fondamentalement, il semble que votre script est codé en dur pour travailler uniquement sur un élément spécifique; ul#list1

Essayez d'envelopper votre code JS dans une fonction comme ceci:

function sorter(setSelector, setCookieName) { 

    /* code */ 

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

    restoreOrder(); 

}

Ensuite, pour chaque liste sur votre page appelez la fonction de tri avec l'identifiant souhaité et nom du cookie en tant que paramètres:

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

Cependant, il y a quelques problèmes avec votre code qui ont besoin d'être corrigés. Pour un, vous utilisez des identifiants où les classes doivent être utilisées sur les éléments li dans la liste ul. Les ID sont supposés être uniques dans une page Web. Ajouter des listes supplémentaires qui utilisent ces mêmes identifiants pour spécifier l'ordre rompt cette hypothèse. Changez ces identifiants en classes et remplacez '#' par '.' dans les sélecteurs s'y référant.

Un plus gros problème je pense est le sélecteur que vous utilisez pour obtenir l'élément parent ul. $("ul.ui-sortable") saisirait tous les éléments <ul class="ui-sortable">. Au lieu de cela, utilisez la variable list déjà définie à la place de $("ul.ui-sortable")

espoir une partie de cette aide ...

Source

2010-06-25 16:45:56 MooGoo

Merci pour la réponse, il est beaucoup plus que ce que j'ai donné d'autres sites et pour être honnête, le script est pas le mien. Je viens de le trouver il y a quelques jours sur ce site. http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/ et j'ai essayé de comprendre comment le faire fonctionner comme je le voulais. Je vais certainement ajouter vos suggestions si je rencontre des problèmes. J'espère que vous pourrez poser d'autres questions. Merci encore. –

Mise à jour: J'ai suivi vos instructions (y compris la modification des identifiants des classes pour les éléments li et changé le code pour utiliser la variable list au lieu de $ ("ul.ui-sortable") et cela a fonctionné parfaitement. votre aide et si je pouvais je vous enverrais de l'argent pour votre aide, mais je ne peux pas, ce que je vais faire est cependant ajouter votre site (http://bigmooworld.com/) à nos sites liens externes section sur la page d'accueil si vous voulez En ce moment, nous obtenons environ 35 000 visites uniques par mois, donc ça peut être mieux que de l'argent à la fin –

Lien loin si vous voulez, mais ma page d'accueil est actuellement juste un shell pour une future idée de site Web auquel je n'ai pas encore pensé Actuellement, il ne s'agit que d'une image de grenouille heureuse, vous pouvez la lier à http://bigmooworld.com/mblog, une page de blog que je ne poste jamais, mais je ne peux pas garantir que c'est SFWness. assez pour moi. – MooGoo

liste Extension de script de tri

Répondre

Questions connexes