DIV CSS 佈局教程網

示例參考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中拖拽排序問題的分析了，希望大家能夠喜歡。