Jquery ui 将jQuery UI Sortable应用于页面上的数百个元素会导致页面加载非常缓慢——需要了解如何提高效率

我正在构建一个拖放日历，发现jQueryUI的sortable为我所做的工作提供了最佳的实时性能

然而，当我的脚本应用所有这些可排序实例时，将可排序应用于数月的天数（一次60到180天，有时甚至更多）会导致页面加载明显滞后。一旦加载，它就可以正常工作，但我不希望出现初始延迟。在某些情况下，浏览器甚至试图终止脚本

我尝试将日历的第一天设置为可排序，然后使用jQuery的.clone（）复制到所有其他日期，但不幸的是，jQuery的.clone（）似乎无法复制.sortable的事件。其他事件（如单击、双击等）可以很好地复制，但不能排序。在网上做一些研究，我能找到的只是jQuery“不支持插件克隆”的说法

有更好的方法吗？我搜索了stackoverflow、jQueryUI的论坛和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加载到其相应里程碑日uls中的li元素

编辑2：发布工作演示：

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

---

请注意，打开页面时会出现延迟。在我的实际应用程序中，比演示中要多得多，因此延迟更为明显。

移动代码，将所有控件绑定到页面加载事件之外。 它不会更快，但对用户来说会更快。 您还可以更改代码和标记，以便在加载时禁用单个项 在他们的事件被绑定后，他们被启用。这将防止快速抽搐

---

用户不必单击它们并想知道为什么什么都没有发生。

在调用sortable（）之后调用connectWith，例如：

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

---

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

尽量不要将所有元素绑定到加载上，这样做

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

jQuery（“.milestone”）.live（“mouseenter”，function（）{
函数sortableStop（事件、用户界面）{
警报（“可排序停止发射！”）；
}
$（$（this.parent（））.bind（“dblclick”，function（））{
警报（“双击发射！”）；
}).可排序({
连接到：“.里程碑日”，
项目：'.milestone'，
停止：桌面
});
});

这将提高性能

---

演示：

如果在调用.sortable（）之前隐藏排序表，我可以使它更快。但是，这只会对iPad Safari产生巨大的影响。对于其他浏览器，情况基本相同

示例代码：

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

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

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

---

我有一个类似的问题，数以百计的图像需要拖动。初始化花费了太多的时间

我可以在mouseenter上通过延迟实例化来解决它，它工作得很好，并且用户体验没有改变

---

查看此处的更多信息

您能发布一些代码以便我们帮助您优化它吗？谢谢您的回复，蒂姆。把代码贴在上面。通常有120个或更多的“里程碑日”ul标记，因此$（“.milestone day”）jQuery对象会多次应用.sortable（）？我认为那是不可能的谢谢你的回复，杰。您是否建议将jQuery代码放入$（document）.ready（）事件中？实际上已经是这样了，所以在初始化排序表时，文档会加载并“冻结”。发生这种情况时，用户无法单击任何内容。如果我有时间，我会发布一个工作演示。嗯，这是一个有趣的方法。我将尝试一下，看看这是否有效。它确实提高了很多性能！不过，对我来说，这辆车太多了，似乎不能很好地工作。就像有时我试图拖动元素时元素“掉出来”一样。我想这是一个bug，我在sortable（）中尝试了正常的connectwith，但它挂起并冻结了。当你像你建议的那样做的时候，它很快，没有任何冻结。。。