IE中的表的jQuery UI性能问题

我在获取UI代码以便在IE中执行时遇到了问题。

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

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

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

 
col 1
col 2
 
row 1
 
 
item A
 
item B
 
 
 
 
row 2
 
 
 
item C
 
item D
 
 
  

然后我使用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在拖动开始时的延迟是显而易见的。 在包含可能100个项目的10×10表格上，拖动的开始会挂起浏览器。

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

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

  
 
item A
 
item B
 
 
 
 
 
item C
 
item D
  

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

Answer 4

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

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