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

I've used JQuery to make the elements in a table draggable. (I've never used JQuery before this). It works fine, but is very slow. For example, from the moment I click and hold on an item, to the moment the cursor changes is about 2 seconds. This is on Firefox 3.0.6. Once the item is being dragged, there's a shorter, but still noticeable delay (about half a second, I'd estimate) between when I let go of the mouse button and when the drop visibly takes place.

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

I suspect that the reason it's so slow is because the table is quite big (6 columns and about 100 rows), but it doesn't seem to me that it's obscenely big, and I wonder if there's something dumb I'm doing that is making it so slow. For example, I wonder if the JQuery code is being pointlessly applied to every element in the table each time you drag something. I don't know why that would happen, though.

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

In case it helps, here's my code (note that I've taken out the cursor call, as I was afraid it might be slowing things down).

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

<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>

The HTML table is like this (as generated by PHP):

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>

(Note: it doesn't seem to work at all in IE 7, so perhaps I'm just doing something very wrong here...)

(注意:它在IE 7中似乎根本不起作用,所以也许我只是在做一些非常错误的事情......)

3 个解决方案

#1

The presence of so many drop targets seems to make the performance so slow. If possible, try setting the table as a single drop target and calculate the target table cell based on the position data in the drop event.

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

Unfortunately, you will also lose the ability to apply styles to individual cells on dragOver and dragOut events.

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

Edit: Another suggestion is to disable droppable on all tds and upon mouseover of a tr, enable the droppables of tds present in the specific tr (and disable them back upon mouseout of tr). Sounds like a hack, but worth a try.

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

#2

I don't suppose its to do with addClasses ? If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling .droppable() init on many hundreds of elements.

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

#3

As a first step, double check that you're using the latest version of jQuery. As I recall, they recently started making use of much faster browser apis (when available) to get the location of dom elements within the display. I think this was mentioned in a presentation John Resig gave recently, and drag and drop was the primary demo of the performance improvement.

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

#1