jqueryUI里拖拽排序示例分析

示例参考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代码中红色代码部分设置了可以拖动进入时就排序，橙色代码部分不太理解，好像没用的样子

复制代码 代码如下:

$(function () {
    $("#catalog").accordion();
    $("#catalog li").draggable({
        appendTo: "body",
        helper: "clone",
        connectToSortable: "#cart ol"
    });
    $("#cart ol").sortable({
        items: "li:not(.placeholder)",
        connectWith: "li",
        sort: function () {
            $(this).removeClass("ui-state-default");
        },
        over: function () {
            //hides the placeholder when the item is over the sortable
            $(".placeholder").hide();
        },
        out: function () {
            if ($(this).children(":not(.placeholder)").length == 0) {
                //shows the placeholder again if there are no items in the list
                $(".placeholder").show();
            }
        }
    });
});

　　另外值得一提的是

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

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