将 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>

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

编辑2：发布工作演示：

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

编辑 3：演示消失了。对不起。

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

Answer 1

在调用 sortable() 之后调用 connectWith，例如：

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

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

Answer 2

尽量不要在加载时绑定所有元素，这样做

<script type="text/javascript">
            jQuery(".milestone").live("mouseenter", function(){
                function sortableStop(event, ui) {
                    alert("Sortable stop fired!");
                }

                $($(this).parent()).bind("dblclick", function() {
                    alert("Double-click fired!");
                }).sortable({
                    connectWith: '.milestone-day',
                    items: '.milestone',
                    stop: sortableStop
                });
            });
        </script>

会提高性能

演示： http://jsfiddle.net/P27qv /

Answer 3

我遇到了类似的问题，有数百张图像需要可拖动。初始化花费了太多时间

我能够通过 mouseenter 上的延迟实例化来解决它，它效果很好，并且用户体验没有改变

在此处查看更多信息 https://stackoverflow.com/a/20399896/287455

Answer 4

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

Answer 5

如果我在调用 .sortable() 之前隐藏可排序项，我可以使其速度更快。但是，它只在 iPad Safari 上产生了巨大的变化。对于其他浏览器，情况几乎相同。

示例代码：

$(".milestone-day").hide()

$(".milestone-day").sortable({
    handle: '.handle',
    connectWith: '.milestone-day',
    items: '.milestone',
    stop: sortableStop
});

$(".milestone-day").show()