jqueryUI里拖拽排序示例分析

示例参考http://jsfiddle.net/KyleMit/Geupm/2/ （这个站需要FQ才能看到效果）
其实是jqueryUI官方购物车拖拽添加例子的增强版，就是在拖拽的时候增加了排序
这个是html代码
复制代码代码如下:
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<h2><a href="#">T-Shirts</a></h2>
    <div>
        <ul>
            <li>Lolcat Shirt</li>
            <li>Cheezeburger Shirt</li>
            <li>Buckit Shirt</li>
        </ul>
    </div>
<h2><a href="#">Bags</a></h2>
    <div>
        <ul>
            <li>Zebra Striped</li>
            <li>Black Leather</li>
            <li>Alligator Leather</li>
        </ul>
    </div>
<h2><a href="#">Gadgets</a></h2>
    <div>
        <ul>
            <li>iPhone</li>
            <li>iPod</li>
            <li>iPad</li>
        </ul>
    </div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
    <div class="ui-widget-content">
        <ol>
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
</div>

这个是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中拖拽排序问题的分析了，希望大家能够喜欢。