关于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等分别对应当有可以拖拽的对象在拖拽时，和拖拽到容器时的效果，本文代码没有体现。