如何使我的 jquery 可拖动/可放置代码更快? [英] How can I make my jquery draggable / droppable code faster?

问题描述

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

我怀疑它这么慢的原因是因为表格很大(6 列和大约 100 行)，但在我看来它并没有大得令人发指，我想知道是不是我有什么愚蠢的东西这样做会使它变得如此缓慢.例如，我想知道每次拖动某些内容时，JQuery 代码是否都毫无意义地应用于表中的每个元素.不过，我不知道为什么会发生这种情况.

如果有帮助，这是我的代码(请注意，我已经取消了游标调用，因为我担心它可能会减慢速度).

HTML 表格是这样的(由 PHP 生成):

<tr><th宽度=14.2857142857%>0</th><th宽度=14.2857142857%>1</th><th宽度=14.2857142857%>2</th><th宽度=14.2857142857%>3</th><th宽度=14.2857142857%>4</th><th宽度=14.2857142857%>5</th><th宽度=14.2857142857%>6</th></tr><tr><td class=draggable_td id='td:0:0:'><div class=draggable_div id='div:0:0:1962'>内容
</td><td class=draggable_td id='td:0:1:1962'><div class=draggable_div id='div:0:1:14482'>内容
</td><!-- 截图:为简洁起见，删除了所有其他单元格--></tr><!-- 截图:为简洁起见，删除了所有其他行-->

(注意:它在 IE 7 中似乎根本不起作用，所以也许我只是在这里做错了什么......)

解决方案

这么多放置目标的存在似乎让性能变得如此缓慢.如果可能，尝试将表格设置为单个放置目标，并根据放置事件中的位置数据计算目标表格单元格.

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

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

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.

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.

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

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

解决方案

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.

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.

这篇关于如何使我的 jquery 可拖动/可放置代码更快?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！