3

私はJQueryの並べ替え可能なグリッドを使用してきましたが、connectWithオプションにリンクされた並べ替え可能なグリッドが2つ以上あると、ドラッグ/プレースホルダーが壊れてしまうという奇妙な問題が発生しました。これまでのところ、Chrome、Firefox、Safariで同じ動作をテストして確認しました。

ドラッグするとマウスの位置が無視され、プレースホルダーの位置がややランダムに表示されるように見えます。

例： http ：//wilhall.com/tests/apptest.html

上記の問題は、グリッドが以下を使用して接続されていない場合に修正されますconnectWith。

例： http ：//wilhall.com/tests/apptest_2.html

本能的に、この質問を投稿するためにコードをjsfiddleにスローすることにしましたが、そうすると、jsfiddleで表示したときにエラーが発生しませんでした。

フィドル： http： //jsfiddle.net/B2ddx/1/

以下は、2つのソート可能なグリッドの構成オプションです。

       $(".modules.app").sortable({
            cursor: "move",
            distance: 1,
            revert: 100,
            scroll: true,
            tolerance: "intersect",
            opacity: 0.6,
            connectWith: ".modules.bin",
            placeholder: "placeholder",
            forcePlaceholderSize: true
        }).disableSelection();

        $(".modules.bin").sortable({
            cursor: "move",
            distance: 1,
            revert: 100,
            scroll: true,
            tolerance: "intersect",
            opacity: 0.6,
            connectWith: ".modules.app",
            placeholder: "placeholder",
            forcePlaceholderSize: true
        }).disableSelection();

サンプルページを更新して、jqueryとjquery-ui以外の外部CSSまたはJSを含めず、jsfiddleと同じjquery＆uiバージョンを使用して、すべてがコーシャであることを確認しましたが、それでも問題は解決しません。

私はこれを引き起こしている可能性があることに本当に困惑しており、新しい解決策を試すときに更新を投稿し続けます。

更新： JSFiddleでは、connectToオプションが正しく機能せず、実際にリストをリンクしていません。これが、問題が存在しない理由です。

また、ソート可能なli要素がフロートされていない場合、問題は発生しません。

更新： 提案されたように、並べ替え可能なアイテムを含む要素の高さのパーセントを削除しました。これにより、問題は修正されましたが、別の要素が作成されました。高さがないと（コンテナーの高さが0になります）、アイテムを2つの並べ替え可能なグリッド間でドラッグできませんでした。

これを修正するために、ソート可能なコンテナーを追加float:leftまたは追加しようとしましたが、同じ問題が発生しました。height: 500px

問題を示す簡略化されたJSFiddle は次のとおりです。http： //jsfiddle.net/y8xrZ/

connectWith呼び出しからオプションを削除する.sortableと、問題は解消されます。このエラーは、を使用しているソート可能なコンテナに影響することに注意してくださいconnectWith。したがって、この例では、コンテナーconnectWithから削除するだけで、コンテナーの問題は#app修正されますが、コンテナーの問題は修正されません。#app#bin

4

4 に答える 4

10

find re jQueryUIバージョンのおかげで、これを解決することができました。

最大の手がかりは、もちろん、connectWithオプションが設定されているときの動作です。ファイルを調べてみるjquery.ui.sortable.jsと、理由はわかり_contactContainersませんが、メソッドに問題があるようです。

jQuery UI 1.8.24が機能することを知って、両方の並べ替え可能なファイルを比較しました。メソッドでも2つのファイルの間にかなりの違いがある_contactContainersように見えますが、if-elseブロックの違いに帰着するようです。この場合、古いバージョンには条件（else if(this.currentContainer != this.containers[innermostIndex])）がありますが、新しいバージョンにはありません。

jquery.ui.sortable.jsバージョン1.9.2の734行目で、次のように始まるif-elseブロックが表示されます。

// move the item into the container if it's not there already
if(this.containers.length === 1) {
    this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
    this.containers[innermostIndex].containerCache.over = 1;
} else {
....

これに変更するだけです：

// move the item into the container if it's not there already
if(this.containers.length === 1) {
    this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
    this.containers[innermostIndex].containerCache.over = 1;
} else if(this.currentContainer != this.containers[innermostIndex]) {

その条件をに追加することelseは私にとってトリックでした。

于 2013-01-30T06:12:23.523 に答える
1

ul要素に適用している明示的な高さと幅のルールがそれを行っていると思います。クラスでこれらのルールを無効にすると、.modules正常に機能しているように見えます。したがって、.modulesクラスから次の行を削除します。

height: 100%;
width: 100%;

パーセンテージの高さを指定することは、とにかく問題があることが一般的に知られている（または少なくとも以前はそうであった）ので、私はそれに対してお勧めします。

于 2013-01-25T03:14:47.627 に答える
1

これはjQueryUI1.10.2で修正されました。同じ問題が発生し、最新の安定バージョンに切り替えられました。

于 2013-04-24T16:46:04.627 に答える
0

私もこの問題を抱えていました。jQuery UIのサンプルコードは、グリッドを作成するためにアイテムをフロートするように指示しています。私の修正は、jQuery UIのTicket＃4551の下部で説明されているように、代わりにインラインブロックを使用するようにCSSを変更することでした-http : //bugs.jqueryui.com/ticket/4551：

フロートを変更：左から表示：インラインブロック

例えば：

<style>
  #sortable1 li, #sortable2 li { display: inline-block; }
</style>

ここで、htmlは次のようなものです。

<ul id="sortable1" class="connectedSortable">
    <li>
       <div class="grid-box">
           ...
       </div>
    </li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li>
       <div class="grid-box">
           ...
       </div>
    </li>
</ul>
于 2014-04-29T18:10:26.993 に答える