IE中表格的jQuery UI性能问题 [英] jQuery UI performance issues with a table in IE

问题描述

我在使UI代码在IE中完全无法执行时遇到问题.

I'm having problems getting UI code to perform at all well in IE.

我有一张桌子-值矩阵.每个单元格可以为空，也可以包含项目列表.

I have a table - a matrix of values. Each cell can be empty or hold a list of items.

我希望用户能够在单元格之间拖动项目.

I want users to be able to drag items between cells.

所以我的HTML看起来像这样:

So my HTML looks something like this:

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

Then I'm using jQuery 1.3.1 and 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
        });
    });
});

请注意，这是简化，截断和未完成的代码.

Note that this is simplified, truncated and unfinished code.

我的问题是，在FX，Safari，Chrome等(即所有不错的浏览器)中，这可以正常工作.

My problem is that in FX, Safari, Chrome, etc (i.e. all the decent browsers) this works fine.

IE确实很挣扎.使用5x5表格时，拖动开始时IE的延迟非常明显.在可能包含100个项目的10x10表格上，拖动的开始会挂起浏览器.

IE really struggles though. With a 5x5 table IE's delay on the start of a drag is noticeable. On a 10x10 table with maybe 100 items the start of the drag hangs the browser.

我希望能够支持最多20x15个圆形单元，也许最多500个项目-这是不可能的吗?似乎不应该.

I want to be able to support up to round 20x15 cells and maybe up to 500 items - is this just impossible? It doesn't seem like it should be.

我做错什么了吗?有没有办法做到这一点，并且不会降低IE中的页面浏览速度?

Am I doing something wrong? Is there a way to do this that doesn't slow the page in IE like this?

推荐答案

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

Narrowing the portion of the DOM that jQuery has to search may help. Add an id to the containing DOM element

<table id="myTable">

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

Then alter your jQuery selector to find elements within this container

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

这篇关于IE中表格的jQuery UI性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！