将jQuery UI Sortable应用于页面上的数百个元素会导致页面加载速度非常慢 - 需要了解如何使其更高效

Question

我正在构建一个拖放日历,并发现jQuery UI的可排序为我正在尝试做的事情提供了最佳的现场表现.

但是,由于我的脚本正在应用所有这些可排序的实例,因此应用可排序到数月的数天(一次60到180天 - 有时更多)导致页面加载时明显滞后.它一旦加载就可以正常工作,但我宁愿没有最初的滞后.在某些情况下,浏览器甚至会尝试终止脚本.

我尝试将日历的第一天排序,然后使用jQuery的.clone()复制到所有其他日子,但不幸的是jQuery的.clone()似乎没有复制.sortable的事件.其他事件(如点击,双击等)可以很好地复制,但不能排序.在网上做一些研究,我所能找到的是jQuery"不支持克隆插件"的说法.

有一个更好的方法吗？我一直在搜索stackoverflow,jQuery UI的论坛和Google,并且没有找到任何帮助.

先谢谢,Jamon

编辑:这是一些代码.没什么特别的.

    function sortableStop(event, ui) {
              // Saves to the DB here. Code removed - not relevant
    }

    $(".milestone-day").bind("dblclick", function(ev) {
      // Allows adding milestones. Code removed - not relevant
    }).sortable({
        handle: '.handle',
        connectWith: '.milestone-day',
        items: '.milestone',
        stop: sortableStop
    });

标记看起来像这样:

<table>
  <tbody>
    <tr>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
    </tr>
    <tr>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
    </tr>
    ...
  </tbody>
</table>

里程碑是li元素通过ajax加载到他们适当的里程碑日uls.

编辑2:工作演示发布:

http://www.clearsightstudio.com/demos/calendar-load/

编辑3:演示消失了.抱歉.

请注意,打开页面时会出现延迟.在我的实际应用程序中,有比实验更多的内容,所以滞后更加明显.

Answer 1

调用sortable()之后调用connectWith,例如:

$('.whatever').sortable().sortable( "option", "connectWith", '.whatever' );

出于某种原因,它在我的场景中提高了性能(数千个元素)

Answer 2

移动代码以将所有控件绑定到页面加载事件之外。它不会更快，但对用户来说会显得更快。您还可以更改代码和标记，以便在加载时禁用各个项目，并在绑定其事件后启用它们。这将防止 Fast twitch 用户点击它们并想知道为什么没有发生任何事情。