Как я могу сделать мой 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.

Редактировать: еще одно предложение - отключить droppable для всех tds и при наведении мыши на tr, включить droppables tds, присутствующие в конкретном tr (и отключить их обратно при наведении мыши на tr). Звучит как хак, но стоит попробовать.

Answer 2

В качестве первого шага дважды проверьте, что вы используете последнюю версию jQuery. Насколько я помню, они недавно начали использовать гораздо более быстрый API-интерфейс браузера (если он доступен), чтобы определить местоположение элементов dom на дисплее. Я думаю, что это было упомянуто в презентации, которую недавно дал Джон Резиг, и перетаскивание было основной демонстрацией улучшения производительности.

Answer 3

Я не думаю, что это связано с addClasses? Если установлено значение false, будет предотвращено добавление класса ui-droppable. Это может быть желательно в качестве оптимизации производительности при вызове .droppable () init для многих сотен элементов.