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

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中拖拽排序问题的分析了，希望大家能够喜欢。