Как я могу сделать свой jquery draggable/droppable code быстрее?

Я использовал 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, поэтому, возможно, я просто делаю что-то очень плохое здесь...)

Ответы

Ответ 1

Наличие стольких целей для снижения, похоже, делает работу настолько медленной. Если возможно, попробуйте установить таблицу в качестве цели с единственной целью и вычислить ячейку целевой таблицы на основе данных позиции в событии drop.

К сожалению, вы также потеряете возможность применять стили к отдельным ячейкам на событиях dragOver и dragOut.

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

Ответ 2

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

Ответ 3

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