1

jQuery sortable で次の問題に直面しています (Firefox を除くすべての主要なブラウザーで正常に動作します)。

私は4つのliアイテムを持つ共通のul構造を持っています。リストが表示され、正常に動作している場合は、項目 (Firefox) をクールにドラッグできます (overflow-y:auto; の問題も解決しました)。firefox で、ドラッグ可能な項目を新しい位置にドロップしようとすると問題が発生します。 「ドロップゾーン」は表示されず、アイテムをドラッグできるのはあなただけです。いくつかの投稿で調査しています。

jQuery UI のソート可能なスクロール ヘルパー要素のオフセット Firefox の問題 Firefox 4 jQuery UI の問題 ソート可能な jquery ui 1.8.16 & firefox 6 - ソート可能が正しく機能しない

しかし、解決策が見つかりません。問題がどのように見えるかを示します。 ここに画像の説明を入力

私のcssは、次のように変更する必要があると思います:

#list-attributes{width:40%; margin:35px 15px 45px 10px; position:relative;  overflow-y:auto;}
#list-attributes li{background:#F7F7F7; padding:20px; color:#666; width:auto; border:1px solid #CCC; position:relative; text-indent:30px; height:25px}
#list-attributes li div.icon{width:25px; height:35px; background:url(../img/search/sprite_search_filters.png) no-repeat; right:0; margin-right:10px; top:18px; position:absolute;}
#list-attributes li div.getinshape{background-position: 0 -297px}
#list-attributes li div.rekindlespiritually{background-position: 0 -357px}
#list-attributes li div.relaxandunwind{background-position: 0 -417px}
#list-attributes li div.gethealthy{background-position: 0 -477px}
#list-attributes li span.msg{ text-indent:28px; line-height:1.8}
#list-attributes li div.handler{color:#666; width:25px; height:25px; background:#00C4D9 url(../../dashboard/frontend/img/drag.png) no-repeat 5px 5px; cursor:move; display:inline-block; position:absolute; top:15px; left:8px}

jqueryコード:

            $("#list-attributes").sortable({
                update : function () {
                     $('#attributeItems').val($('#list-attributes').sortable('toArray'));
                    //$("#info").load("process-sortable.php?"+order);
                }
            });
4

1 に答える 1

1

これが答えです。これは非常に大きなバグであり、なぜ起こっているのかわかりません。

body要素にあったCSSファイルで

オーバーフロー-y: スクロール; オーバーフロー-x: 非表示;

本体から削除したところ、ソート可能になりましたが、overflow:auto をコンテナー (通常は ul) タグに追加する必要がありました。

これはとても「wtf」なバグですが、見つけました。誰かが将来これに直面した場合、それを解決できることを願っています。それを行うためのより良い方法を見つけたら、私に知らせてください。

于 2012-05-13T00:56:56.253 に答える