脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jqueryUI里拖拽排序示例分析，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

其实是jqueryUI官方购物车拖拽添加例子的增强版，就是在拖拽的时候增加了排序

这个是htML代码

代码如下:

<p id="PRoducts">
<h1 class="ui-widget-header">Products</h1>
<p id="cataLOG">
<h2><a href="#">T-shirts</a></h2>
&nbsp;   <p>
        <ul>
            <li>LOLcat Shirt</li>
            <li>Cheezeburger Shirt</li>
            <li>BuckIT Shirt</li>
        </ul>
    </p>
<h2><a href="#">Bags</a></h2>
    <p>
        <ul>
            <li>Zebra StriPEd</li>
            <li>Black Leather</li>
            <li>Alligator Leather</li>
        </ul>
    </p>
<h2><a href="#">Gadgets</a></h2>
    <p>
        <ul>
            <li>iPhone</li>
            <li>IPOd</li>
            <li>iPad</li>
        </ul>
    </p>
</p>
</p>
<p id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
    <p class="ui-widget-content">
        <ol>
            <li class="placeholder">Add your items here</li>
        </ol>
    </p>
</p>

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

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jqueryUI里拖拽排序示例分析全部内容，希望文章能够帮你解决javascript代码实例教程-jqueryUI里拖拽排序示例分析所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。