如何使我的jQuery可拖動/可拖放代碼更快？

我已經使用JQuery來使表中的元素可拖動。（在此之前我從未使用JQuery）。它工作正常，但是非常慢。例如，從點擊並按住某個項目的那一刻起，光標變化的時間大約爲2秒。這是在Firefox 3.0.6上。一旦物品被拖動，當我放開鼠標按鈕時以及明顯發生掉落之間有一個較短但仍然明顯的延遲（大約半秒鐘，我估計）。如何使我的jQuery可拖動/可拖放代碼更快？

我懷疑它太慢的原因是因爲桌子很大（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在所有的工作，所以也許我只是在做這裏的東西非常錯誤......）

來源

2009-02-16 Ben

這麼多下降目標的出現似乎會讓表現如此之慢。如果可能，嘗試將表格設置爲單個放置目標，並根據放置事件中的位置數據計算目標表格單元格。

不幸的是，您還將失去將樣式應用於dragOver和dragOut事件上的單個單元格的功能。

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

來源

2009-02-19 22:32:11

這是一個有趣的建議。我可能不得不採用這種方式作爲最後的手段，但遺失樣式單元格的能力將是一個恥辱，因爲這是非常重要的反饋，可以讓用戶知道他們正在放置哪個單元格。 – Ben 2009-02-19 22:34:29

看看我的編輯。這可能值得一試。 – 2009-02-19 22:56:59

我不認爲它與addClasses？ 如果設置爲false，將阻止添加ui-droppable類。當在數百個元素上調用.droppable（）init時，這可能是期望的性能優化。

來源

2009-02-17 00:47:25 Snapey

謝謝 - 這是一個很好的建議。我試過了，我認爲它可能會稍微加快速度，但它仍然太慢... – Ben 2009-02-17 08:42:41

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

來源

2009-02-25 04:37:19

如何使我的jQuery可拖動/可拖放代碼更快？

回答

相關問題