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

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

所以我的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中减慢页面速度？