IE中的表的jQuery UI性能问题

Question

我在获取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在拖动开始时的延迟是显而易见的.在10x10的桌子上,可能有100个项目,拖动的开始会挂起浏览器.

我希望能够支持最多20x15的圆形细胞,最多可能支持500个项目 - 这是不可能的？它似乎不应该是.

难道我做错了什么？有没有办法做到这一点,不会像这样在IE中减慢页面速度？

Answer 1

这正是 iGoogle 和其他类似应用程序使用边缘带有虚线的透明框的原因。由于您上面概述的问题，IE 无法拖动完整的对象。