jquery-ui - 将 jQuery UI Sortable 应用于页面上的数百个元素会导致页面加载非常慢 - 需要如何提高效率的想法

Question

我正在构建一个拖放日历，并发现 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>

里程碑是通过 ajax 加载到其正确的里程碑日 ul 中的 li 元素。

编辑 2:已发布工作演示:

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

编辑 3:演示已消失。抱歉。

请注意，打开页面时会出现延迟。与我的实际应用程序中的演示相比，发生的事情要多得多，因此滞后更加明显。

Answer 1

调用sortable()后调用connectWith，例如:

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

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