IEのテーブルでjQuery UIのパフォーマンスに関する問題が発生しました

Question

IEでよく機能するUIコードを取得できません。

私はテーブルを持っています - 値の行列。各セルは空でも、アイテムのリストを保持することもできます。

ユーザーがセル間で項目をドラッグできるようにしたい。

だから私のHTMLは次のようなものになります。これは、単純化された切り捨てと未完成であること

$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 
     }); 
    }); 
}); 

注：その後、私はjQueryの1.3.1とjQuery UI 1.6rc6を使用してい

<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> 

をコード。

私の問題は、FX、Safari、Chromeなど（すべてのまともなブラウザ）ではうまくいきます。

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

20x15までのセルをサポートしたいと思うかもしれません。おそらく最大500アイテムです。これは単なる不可能なのでしょうか？それはそうすべきではないようです。

何か間違っていますか？このようなIEのページを遅くしないこれを行う方法はありますか？

Answer 1

この厳密な問題は、iGoogleや他のsimliarアプリケーションが、エッジの周りに点線で囲まれた透明なボックスを使用する理由です。上記で概説した問題のため、IEは完全なオブジェクトをドラッグできません。

Answer 2

テーブルをレンダリングすることができます...テーブルなしで試してみることはできますか？

あなたの細胞は、あなたがそれらを浮動テーブルのような表示を実現することができます同じサイズである場合は、次の表を使用しても「固定」するtable-layoutスタイルを設定し、セルのサイズを指定する必要不可欠である場合

<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> 

助けて。

Answer 3

jQueryが検索しなければならないDOMの部分を絞り込むと、役立つ場合があります。

<table id="myTable"> 

はその後、このコンテナ内の要素を見つけるためにあなたのjQueryのセレクタを変える含むDOM要素にIDを追加します

$j('#myTable .draggable-item').each(function() { ... 

Answer 4

周りにドロップ可能な定義から「activeClass」を落としている、とだけ使用して私の仕事'hoverClass'

約10行の約150行の表にあります。 10秒の遅れから1秒未満になりました。引きずりは少しぎこちなくなりましたが、使用できませんでした。