IE中的表的jQuery UI性能问题

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

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

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

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

<table id="myTable">

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

$j('#myTable .draggable-item').each(function() { ...
本站公众号
   欢迎关注本站公众号,获取更多程序园信息
开发小院