Heim > Web-Frontend > js-Tutorial > Analyse des Drag-and-Drop-Sortierbeispiels in jqueryUI_jquery

Analyse des Drag-and-Drop-Sortierbeispiels in jqueryUI_jquery

WBOY
Freigeben: 2016-05-16 16:13:07
Original
1178 Leute haben es durchsucht

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

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage