Analyse des Drag-and-Drop-Sortierbeispiels in jqueryUI_jquery

Beispielreferenzhttp://jsfiddle.net/KyleMit/Geupm/2/ (Diese Website erfordert FQ, um den Effekt zu sehen)

Tatsächlich handelt es sich um eine erweiterte Version des offiziellen Warenkorb-Drag-and-Drop-Beispiels von jqueryUI, das beim Ziehen eine Sortierung hinzufügt

Dies ist HTML-Code

Code kopieren Der Code lautet wie folgt:

Produkte

T-Shirts

                                                                                                                      

Lolcat Shirt

                                                                                                                                                                               

Buckit Shirt

                                                                                 

Taschen

                                                                                                         

Zebra gestreift

                                                                                                                                                                                                                                                                                                                                         

Gadgets

                                                                                                                                              

iPhone

                                                     

iPod

                                                                                                                                                                                                              

Warenkorb

                                                                                                                                    

Fügen Sie hier Ihre Artikel hinzu

        

Dies ist der JS-Code, der so eingestellt ist, dass er sortiert werden kann. Der orangefarbene Codeteil ist nicht sehr verständlich und scheint nutzlos




Code kopieren


Der Code lautet wie folgt:

$(function () {
    $("#catalog").accordion();
    $("#catalog li").draggable({
        appendTo: „body“,
        Helfer: „klonen“,
        connectToSortable: „#cart ol“
    });
    $("#cart ol").sortable({
        Elemente: „li:not(.placeholder)“,
        connectWith: „li“,
        Sortieren: Funktion () {
            $(this).removeClass("ui-state-default");
        },
        over: function () {
            //versteckt den Platzhalter, wenn sich das Element über dem sortierbaren
befindet             $(".placeholder").hide();
        },
        out: function () {
            if ($(this).children(":not(.placeholder)").length == 0) {
                //zeigt den Platzhalter erneut an, wenn keine Elemente in der Liste vorhanden sind
                $(".placeholder").show();
            }
        }
    });
});

　　另外值得一提的是

.ui-state-default貌似是拖拽时内置的一些类，对应的还有
ui-state-hover ist eine funktionsfähige Lösung 🎜>

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