jquery - 如何使我的 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事件上将样式应用到单个单元格。

编辑:另一个建议是在所有 td 上禁用 droppable，并在鼠标悬停在 tr 上时，启用特定 tr 中存在的 td 的 droppable(并在鼠标移出 tr 时禁用它们)。听起来像是黑客，但值得一试。