如何讓我的jquery可拖動/可拖放代碼更快？

Question

我使用JQuery來使表中的元素可拖動。 （在此之前我從未使用過JQuery）。 它工作正常，但速度很慢。 例如，從我點擊並按住某個項目的那一刻起，到光標變化的那一刻約為2秒。 這是在Firefox 3.0.6上。 一旦項目被拖動，在我放開鼠標按鈕和顯着下降之間有一個更短但仍然明顯的延遲（大約半秒，我估計）。

我懷疑它是如此之慢的原因是因為桌子很大（6列和大約100行），但在我看來它並不是很大，我想知道是否有些愚蠢我正在做的那是讓它變得如此緩慢。 例如，我想知道每次拖動時JQuery代碼是否被毫無意義地應用於表中的每個元素。 不過，我不知道為什么會這樣。

如果它有幫助，這是我的代碼（注意我已經取出了光標調用，因為我擔心它可能會減慢速度）。

<script type='text/javascript'>
  $(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. 
          }
        }
      );
    }
  );
</script>

HTML表是這樣的（由PHP生成）：

<table id='main_table' border=0>
<tr>
  <th width=14.2857142857%>0</th>
  <th width=14.2857142857%>1</th>
  <th width=14.2857142857%>2</th>
  <th width=14.2857142857%>3</th>
  <th width=14.2857142857%>4</th>
  <th width=14.2857142857%>5</th>
  <th width=14.2857142857%>6</th>
</tr>
<tr>
  <td class=draggable_td id='td:0:0:'>
  <div class=draggable_div id='div:0:0:1962'>
    content
  </div>
  </td>
  <td class=draggable_td id='td:0:1:1962'>
  <div class=draggable_div id='div:0:1:14482'>
    content
  </div>
  </td>
  <!-- snip: all the other cells removed for brevity -->
</tr>
<!-- snip: all the other rows removed for brevity -->
</table>

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

Answer 1

如此多的掉落目標的存在似乎使性能如此緩慢。 如果可能，嘗試將表設置為單個放置目標，並根據放置事件中的位置數據計算目標表單元格。

不幸的是，您還將無法在dragOver和dragOut事件上將樣式應用於單個單元格。

編輯：另一個建議是禁用所有tds上的droppable，並在tr的鼠標懸停時，啟用特定tr中存在的tds的droppable（並在trout鼠標輸出時禁用它們）。 聽起來像一個黑客，但值得一試。

Answer 2

我不認為它與addClasses有關？ 如果設置為false，將阻止添加ui-droppable類。 在數百個元素上調用.droppable（）init時，可能需要將其作為性能優化。

Answer 3

作為第一步，仔細檢查您使用的是最新版本的jQuery。 我記得，他們最近開始使用更快的瀏覽器api（如果可用）來獲取顯示器中dom元素的位置。 我認為這是John Resig最近給出的一個演示文稿中提到的，拖放是性能改進的主要演示。