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

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

<table id="myTable">

然后改变你的jQuery选择器来查找这个容器中的元素

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

Answer 2

这个确切的问题是为什么iGoogle和其他simliar应用程序使用透明框，边缘周围有虚线。由于上面列出的问题，IE无法拖动完整的对象。

Answer 3

它可能是表格渲染......你可以试试没有桌子吗？

如果您的单元格大小相同，则可以实现浮动它们的表格式显示：

<style>
.droppable-cell{
  float:left; width: 50%; height: 20px; border: 1px solid black;
}
</style>

<div class="droppable-cell">
        <div class="draggable-item">item A</div>
        <div class="draggable-item">item B</div>
</div>
<div class="droppable-cell"></div>
<div class="droppable-cell"></div>
<div class="droppable-cell">
        <div class="draggable-item">item C</div>
        <div class="draggable-item">item D</div>
</div>

如果使用表格必须将table-layout样式设置为“固定”并指定单元格大小可能会有所帮助。

Answer 4

我的工作是从droppable定义中删除'activeClass'，并且仅使用'hoverClass'。

在约150行，约10列的表格上。它从10秒延迟到小于1.拖动变得有点生涩，但不是无法使用。

IE中的表的jQuery UI性能问题

4 个答案: