jqueryUI里拖拽排序示例分析

前端技术 2023/09/03 JavaScript

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

本文地址：https://www.stayed.cn/item/6482

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案