我怎样才能让我的jquery可拖动/器可弃code更快？ [英] How can I make my jquery draggable / droppable code faster?

问题描述

我用jQuery来使一个表中的元素拖动。 （我从来没有在这之前的JQuery使用）。它工作正常，但的非常的慢。例如，从目前我点击并按住项目，以当下光标变为大约为2秒。这是在Firefox 3.0.6。一旦该项目被拖动，有一个较短，但仍然明显的延迟（大约半秒钟，我估计），当我松开鼠标按钮并在明显下降发生的。

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.

我怀疑它是如此缓慢的原因是因为该表是相当大的（6列和100列），但它不是在我看来，这是否是肮脏的大，我不知道是否有一些愚蠢的我这样做是使它如此缓慢。例如，我不知道如果JQuery的code为每次拖东西时被无谓地应用到每一个元素在表中。我不知道为什么会发生，但。

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.

在情况下，它可以帮助，这是我的code（请注意，我取出光标打电话，因为我害怕它可能速度变慢）。

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>

HTML表是这样的（如由PHP生成）：

The HTML table is like this (as generated by 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在所有的工作，所以也许我只是在做一件很错在这里...）

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

推荐答案

这么多下降目标的presence似乎使性能如此之慢。如果可能的话，尝试设置表作为一个单独放置目标并计算目标表单元格的基础上在drop事件的位置数据。

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.

不幸的是，你也将失去样式应用到的dragover和带出事件的单个细胞的能力。

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

编辑：另一个建议是禁用投掷的所有TDS和在一个TR的鼠标悬停，使TDS present在特定的Tr的droppables（和禁用他们回来后，TR的鼠标移开）。听起来像一个黑客，但值得一试。

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.

这篇关于我怎样才能让我的jquery可拖动/器可弃code更快？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！