jqueryUI里拖拽排序示例分析

更新時(shí)間：2015年02月26日 08:53:11 投稿：hebedich

本文主要是通過(guò)具體實(shí)例分析jQueryUI里拖拽排序問(wèn)題，十分的實(shí)用，這里推薦給小伙伴們。

示例參考http://jsfiddle.net/KyleMit/Geupm/2/ （這個(gè)站需要FQ才能看到效果）

其實(shí)是jqueryUI官方購(gòu)物車(chē)拖拽添加例子的增強(qiáng)版，就是在拖拽的時(shí)候增加了排序

這個(gè)是html代碼

復(fù)制代碼代碼如下:

<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>

　　這個(gè)是js代碼主要在js代碼中紅色代碼部分設(shè)置了可以拖動(dòng)進(jìn)入時(shí)就排序，橙色代碼部分不太理解，好像沒(méi)用的樣子

復(fù)制代碼代碼如下:

$(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貌似是拖拽時(shí)內(nèi)置的一些類(lèi)，對(duì)應(yīng)的還有
ui-state-hover等分別對(duì)應(yīng)當(dāng)有可以拖拽的對(duì)象在拖拽時(shí)，和拖拽到容器時(shí)的效果，本文代碼沒(méi)有體現(xiàn)。

以上就是關(guān)于jQueryUI中拖拽排序問(wèn)題的分析了，希望大家能夠喜歡。

您可能感興趣的文章: