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 在拖动开始时的延迟非常明显。在可能有 100 个项目的 10x10 表格上，拖动开始时会挂起浏览器。

我希望能够支持最多 20x15 的单元格，甚至最多 500 个项目 - 这不可能吗？看起来不应该是这样。

我做错了什么吗？有没有办法做到这一点，而不会像这样减慢 IE 中的页面速度？

Answer 1

缩小 jQuery 必须搜索的 DOM 部分可能会有所帮助。将 id 添加到包含的 DOM 元素

<table id="myTable">

然后更改 jQuery 选择器以查找此容器中的元素

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