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最近给出的一个演示文稿中提到的，拖放是性能改进的主要演示。

如何让我的jquery可拖动/可拖放代码更快？

3 个答案: