Rumah > hujung hadapan web > tutorial js > Analisis contoh pengisihan seret dan lepas dalam jqueryUI_jquery

Analisis contoh pengisihan seret dan lepas dalam jqueryUI_jquery

WBOY
Lepaskan: 2016-05-16 16:13:07
asal
1201 orang telah melayarinya

Contoh rujukanhttp://jsfiddle.net/KyleMit/Geupm/2/ (Tapak ini memerlukan FQ untuk melihat kesannya)

Malah, ia adalah versi dipertingkatkan contoh seret dan lepas troli beli-belah rasmi jqueryUI, yang menambah pengisihan apabila menyeret

Ini ialah kod html

Salin kod Kod adalah seperti berikut:


Produk



Baju-T



                                                                                                                               
  • Baju Lolcat

  •                                                                                                                                                                                                                                                                                                                                                                     
  • Baju Buckit

  •                                                                                                                                                                                                                              

    Beg



                                                                                                                                                         
  • Zebra Belang

  •                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

    Alat



                                                                                                                                                              
  • iPhone

  •                                                        
  • iPod

  •                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                




    Keranjang Beli-belah



                                                                                                                                                  
  • Tambahkan item anda di sini

  •         





    Ini ialah kod js Bahagian kod merah dalam kod js ditetapkan untuk diisih apabila ia boleh diseret ke dalam Bahagian kod oren tidak begitu difahami dan kelihatan tidak berguna





    Salin kod

    Kod adalah seperti berikut:

    $(fungsi () {
        $("#catalog").akordion();
        $("#catalog li").boleh diseret({
            tambahkanKepada: "badan",
            pembantu: "klon",
            connectToSortable: "#cart ol"
        });
        $("#cart ol").boleh disusun({
            item: "li:not(.placeholder)",
            sambungDengan: "li",
            isihan: fungsi () {
                $(this).removeClass("ui-state-default");
            },
            atas: fungsi () {
                //menyembunyikan pemegang tempat apabila item melebihi boleh diisih
                $(".pemegang tempat").hide();
            },
            keluar: fungsi () {
                if ($(this).children(":not(.placeholder)").length == 0) {
                    //menunjukkan pemegang tempat sekali lagi jika tiada item dalam senarai
                    $(".pemegang tempat").show();
                }
            }
        });
    });

      另外值得一提的是

    .ui-state-default貌似是拖拽时内置的一些类,对应的还有
    ui-state-hover等分别对应当有可以拖拽的对象在拖拽时,和拖拽到容器时的效果,本文代玜。。

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

    Label berkaitan:
    sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan