jqueryUI裡拖曳排序範例分析_jquery

範例參考http://jsfiddle.net/KyleMit/Geupm/2/  （此站需要FQ才能看到效果）

其實是jqueryUI官方購物車拖曳添加例子的增強版，就是在拖曳的時候增加了排序

這個是html代碼

複製程式碼 程式碼如下:

Products

T-Shirts

   

       

           
• Lolcat Shirt

           
• Cheezeburger Shirt

           
• Buckit Shirt

       

   

Bags

   

       

           
• Zebra Striped

           
• Black Leather

           
• Alligator Leather

       

   

Gadgets

   

       

           
• iPhone

           
• iPod

           
• iPad

       

   

Shopping Cart

   

       

           
1. Add your items here

       

   

　　這個是js程式碼主要在js程式碼中紅色程式碼部分設定了可以拖曳進入時就排序，橘色程式碼部分不太理解，好像沒用的樣子

複製程式碼 程式碼如下:

$(函數 () {
    $("#catalog").accordion();
    $("#catalog li").draggable({
        附加到：“正文”，
        助理：“克隆”，
        connectToSortable：「#cart ol」
    });
    $("#cart ol").sortable({
        items: "li:not(.placeholder)",
        連結：“li”，
        排序：函數 () {
            $(this).removeClass("ui-state-default");
        },
        結束：函數 () {
            //當項目位於可排序
上方時隱藏佔位符             $(".placeholder").hide();
        },
        輸出：函數 () {
            if ($(this).children(":not(.placeholder)").length == 0) {
                //若清單中沒有項目，則再顯示佔位符
                $(".placeholder").show();
            }
        }
    });
});

另外值得一提的是

.ui-state-default 是拖曳時內建的一些類，對應的還有
ui-state-hover等分別對刑罰有可以拖曳的物體在拖曳時，和拖曳到容器時的效果，頁面代碼沒有體現。

以上就是關於jQueryUI中拖曳排序問題的分析了，希望大家能夠喜歡。