首頁 > web前端 > js教程 > jqueryUI裡拖曳排序範例分析_jquery

jqueryUI裡拖曳排序範例分析_jquery

WBOY
發布: 2016-05-16 16:13:07
原創
1178 人瀏覽過

範例參考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

  2.        

   


  這個是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中拖曳排序問題的分析了,希望大家能夠喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板