6

UI コードを IE でうまく実行するのに問題があります。

値のマトリックスであるテーブルがあります。各セルは空にすることも、アイテムのリストを保持することもできます。

ユーザーがセル間でアイテムをドラッグできるようにしたい。

したがって、私の HTML は次のようになります。

<table>
    <tr><td></td><th scope="col">col 1</th><th scope="col">col 2</th></tr>
    <tr><th scope="row">row 1</th>
        <td class="droppable-cell">
            <div class="draggable-item">item A</div>
            <div class="draggable-item">item B</div>
        </td>
        <td class="droppable-cell"></td>
    </tr>
    <tr><th scope="row">row 2</th>
        <td class="droppable-cell"></td>
        <td class="droppable-cell">
            <div class="draggable-item">item C</div>
            <div class="draggable-item">item D</div>
        </td>
    </tr>
</table>

次に、jQuery 1.3.1 と jQuery UI 1.6rc6 を使用しています。

$j('.draggable-item').each(function()
{
    $j(this).draggable({
       addClasses: false,
       revert: true, 
       zIndex: 2000,
       cursor: 'move'
    });
});

$j('.droppable-cell').each(function()
{
    $j(this).droppable({
        addClasses: false,
        activeClass: 'droppable-cell-candrop',
        hoverClass: 'droppable-cell-hover',
        tolerance: 'pointer',

        drop: function(event, ui)
        {
            //function to save change
        });
    });
});

これは単純化され、切り詰められた未完成のコードであることに注意してください。

私の問題は、FX、Safari、Chrome など (つまり、適切なブラウザーすべて) でこれが正常に機能することです。

IEは本当に苦労します。5x5 のテーブル IE では、ドラッグ開始時の遅延が顕著です。おそらく100個のアイテムを持つ10x10のテーブルでは、ドラッグの開始によりブラウザがハングします。

最大で 20x15 セル、おそらく最大 500 個のアイテムをサポートできるようにしたいのですが、これは不可能ですか? そうあるべきではないようです。

私は何か間違ったことをしていますか？このようにIEでページを遅くしない方法はありますか?

4

4 に答える 4

3

jQuery が検索する必要のある DOM の部分を絞り込むと、役立つ場合があります。含まれている DOM 要素に id を追加します

<table id="myTable">

次に、jQuery セレクターを変更して、このコンテナー内の要素を検索します

$j('#myTable .draggable-item').each(function() { ...
于 2009-02-27T19:14:16.603 に答える
2

この正確な問題が、iGoogle や他の同様のアプリが、端に点線が付いた透明なボックスを使用する理由です。上で概説した問題のため、IE は完全なオブジェクトをドラッグできません。

于 2009-02-24T12:04:20.390 に答える
2

それはテーブルのレンダリングかもしれません...テーブルなしで試してみることができますか?

セルが同じサイズの場合、それらを浮かせて表のような表示を実現できます。

<style>
.droppable-cell{
  float:left; width: 50%; height: 20px; border: 1px solid black;
}
</style>

<div class="droppable-cell">
        <div class="draggable-item">item A</div>
        <div class="draggable-item">item B</div>
</div>
<div class="droppable-cell"></div>
<div class="droppable-cell"></div>
<div class="droppable-cell">
        <div class="draggable-item">item C</div>
        <div class="draggable-item">item D</div>
</div>

テーブルを使用する必要がある場合は、テーブル レイアウトスタイルを「固定」に設定し、セル サイズを指定すると役立つ場合があります。

于 2009-02-24T15:02:44.050 に答える
1

私の回避策は、ドロップ可能な定義から「activeClass」を削除し、「hoverClass」のみを使用することです。

約10列の約150行のテーブル。ラグが 10 秒から 1 秒未満になりました。ドラッグが少しぎくしゃくしますが、使用できないほどではありません。

于 2011-02-15T16:57:55.000 に答える