jquery-ui – 将jQuery UI Sortable应用于页面上的数百个元素导致页面加载速度非常慢 – 需要关于如何使其更高效的想法

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

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

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

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

提前致谢,
火腿

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

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：演示消失了.抱歉.

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

解决方法

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

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

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