Analysis of drag and drop sorting example in jqueryUI_jquery

Example referencehttp://jsfiddle.net/KyleMit/Geupm/2/ (This site requires FQ to see the effect)

In fact, it is an enhanced version of the jqueryUI official shopping cart drag and drop example, which adds sorting when dragging

This is html code

Copy code The code is as follows:

Products

T-Shirts

                                                                                                                        

Lolcat Shirt

                                                                                                                                                                                                    

Buckit Shirt

                                                                                   

Bags

                                                                                                           

Zebra Striped

                                                                                                                                                                                                                                                                                                                                                                                     

Gadgets

                                                                                                                                                   

iPhone

                                                       

iPod

                                                                                                                                                                                                                                     

Shopping Cart

                                                                                                                                         

Add your items here

        

This is the js code. The red code part in the js code is set to be sorted when it can be dragged into. The orange code part is not very understandable and seems useless





Copy code

The code is as follows:

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