如何让我的jquery draggable / droppable代码更快？

我使用JQuery来使表中的元素可拖动。 （在此之前我从未使用过JQuery）。 它工作正常，但速度很慢。 例如，从我点击并按住某个项目的那一刻起，到光标变化的那一刻约为2秒。 这是在Firefox 3.0.6上。 一旦项目被拖动，在我放开鼠标按钮和显着下降之间有一个更短但仍然明显的延迟（大约半秒，我估计）。

我怀疑它是如此之慢的原因是因为桌子很大（6列和大约100行），但在我看来它并不是很大，我想知道是否有些愚蠢我正在做的那是让它变得如此缓慢。 例如，我想知道每次拖动时JQuery代码是否被毫无意义地应用于表中的每个元素。 不过，我不知道为什么会这样。

如果它有帮助，这是我的代码（注意我已经取出了光标调用，因为我担心它可能会减慢速度）。

 $(document).ready ( function() { $('.draggable_div').draggable ( { start: function(event, ui) { $(this).css('background-color','#ddddff'); } } ); $('.draggable_td').droppable ( { over: function(event, ui) { $(this).css('background-color', '#ccffcc'); }, out: function(event, ui) { $(this).css('background-color', null); }, drop: function(event, ui) { // snip: removed code here to save space. } } ); } );  

HTML表是这样的（由PHP生成）：

 
 
 
0
 
1
 
2
 
3
 
4
 
5
 
6
 
 
 
 
 content 
 
 
 
 content 
 
  
   

（注意：它在IE 7中似乎根本不起作用，所以也许我只是在做一些非常错误的事情……）

Answer 1

如此多的掉落目标的存在似乎使性能如此缓慢。 如果可能，尝试将表设置为单个放置目标，并根据放置事件中的位置数据计算目标表单元格。

不幸的是，您还将无法在dragOver和dragOut事件上将样式应用于单个单元格。

编辑：另一个建议是禁用所有tds上的droppable，并在tr的鼠标hover时，启用特定tr中存在的tds的droppable（并在trout鼠标输出时禁用它们）。 听起来像是一个黑客，但值得一试。

Answer 2

我不认为它与addClasses有关？ 如果设置为false，将阻止添加ui-droppable类。 在数百个元素上调用.droppable（）init时，可能需要将其作为性能优化。

Answer 3

作为第一步，仔细检查您使用的是最新版本的jQuery。 我记得，他们最近开始使用更快的浏览器api（如果可用）来获取显示器中dom元素的位置。 我认为这是John Resig最近给出的一个演示文稿中提到的，拖放是性能改进的主要演示。