Maison  >  Article  >  interface Web  >  Analyse de l'exemple de tri par glisser-déposer dans jqueryUI_jquery

Analyse de l'exemple de tri par glisser-déposer dans jqueryUI_jquery

WBOY
WBOYoriginal
2016-05-16 16:13:071138parcourir

Exemple de référencehttp://jsfiddle.net/KyleMit/Geupm/2/ (Ce site nécessite FQ pour voir l'effet)

En fait, il s'agit d'une version améliorée de l'exemple officiel de glisser-déposer du panier d'achat jqueryUI, qui ajoute un tri lors du glisser

Ceci est du code HTML

Copier le code Le code est le suivant :


Produits



T-Shirts



                                                                                                                    
  • Chemise Lolcat

  •                                                                                                                                                                                     
  • Chemise Buckit

  •                                                                                

    Sacs



                                                                                                           
  • Zèbre rayé

  •                                                                                                                                                                                                                                                                                                                                                 

    Gadgets



                                                                                                                                                  
  • iPhone

  •                                                      
  • iPod

  •                                                                                                                                                                                                                  




    Panier



                                                                                                                                         
  • Ajoutez vos éléments ici

  •         





    Il s'agit du code js. La partie code rouge dans le code js est configurée pour être triée lorsqu'elle peut être glissée dedans. La partie code orange n'est pas très compréhensible et semble inutile
    .




    Copier le code

    Le code est le suivant :

    $(fonction () {
        $("#catalog").accordion();
        $("#catalog li").draggable({
            appendTo : "corps",
            assistant : "clone",
            connectToSortable : "#cart ol"
        });
        $("#cart ol").sortable({
            éléments : "li:not(.placeholder)",
            connecterAvec : "li",
            trier : fonction () {
                $(this).removeClass("ui-state-default");
            },
            terminé : fonction () {
                //masque l'espace réservé lorsque l'élément est sur le triable
                $(".placeholder").hide();
            },
            out : fonction () {
                if ($(this).children(":not(.placeholder)").length == 0) {
                    //affiche à nouveau l'espace réservé s'il n'y a aucun élément dans la liste
                    $(".placeholder").show();
                >
            >
        });
    });

      另外值得一提的是

    .ui-state-default貌似是拖拽时内置的一些类,对应的还有
    ui-state-hover 🎜>

    以上就是关于jQueryUI中拖拽排序问题的分析了,希望大家能够喜欢。

    Déclaration:
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn