jqueryUI_jquery でのドラッグ アンド ドロップの並べ替え例の分析

参考例http://jsfiddle.net/KyleMit/Geupm/2/ (このサイトでは効果を確認するには FQ が必要です)

実際、これは jqueryUI 公式ショッピング カートのドラッグ アンド ドロップの例の拡張バージョンで、ドラッグ時の並べ替えを追加しています

これは HTML コードです

コードをコピーします コードは次のとおりです:

製品

T シャツ

                                                                                       

Lolcat シャツ

                                                                                                                                                                   

バケットシャツ

                                                                                   

バッグ

                                                                                       

ゼブラストライプ

                                                                                                                                                                                                                                                                                                                                                                                     

ガジェット

                                                                                       

iPhone

iPod

                                                                                                                                                                                                                                     

ショッピング カート

                                                                                         

ここにアイテムを追加

これは js コードです。js コード内の赤いコード部分は、ドラッグできるとソートされるように設定されています。オレンジ色のコード部分は、あまり理解できず、役に立たないようです。





コードをコピー

コードは次のとおりです:

$(関数() {
    $("#catalog").accordion();
    $("#catalog li").draggable({
        appendTo: "本文",
        ヘルパー: "クローン"、
        connectToSortable: "#cart ol"
    });
    $("#cart ol").sortable({
        項目: "li:not(.placeholder)"、
        connectWith: "li",
        並べ替え: function () {
            $(this).removeClass("ui-state-default");
        }、
        over: function () {
            // 項目が並べ替え可能な項目の上にある場合、プレースホルダーを非表示にします
            $(".placeholder").hide();
        }、
        out: function () {
            if ($(this).children(":not(.placeholder)").length == 0) {
                // リストに項目がない場合はプレースホルダーを再度表示します
                $(".placeholder").show();
            }
        }
    });
});

另外值得一提的是

.ui-state-default の特徴は、拖拽時に内部に配置されているいくつかの種類であり、さらに
ui-state-hover などは、選択可能なオブジェクトが選択されたときとコンテナに到達したときの効果をそれぞれ表しており、ここでは何も記述されていません。

以上は、jQueryUI の順序付けの問題に関する分析であり、ご満足いただけると幸いです。