通过为新元素启用拖放来解决 jquery 性能问题答案

【问题标题】：jquery performance issues by enable drag & drop for new elements通过为新元素启用拖放来解决 jquery 性能问题
【发布时间】：2013-09-06 07:22:54
【问题描述】：

我有一个小型 Web 应用程序，可以使用一些拖放功能。想象一个小订单系统，您可以说订单 1（可拖动）将由员工 2（可拖放）完成。这很好用。但是：

每 20 秒。我通过 AJAX 向数据库询问新订单。这些新订单也将是可拖动的。如果另一所大学已下令雇用员工，则每个员工的订单列表也未加载。要在 ajax 请求后启用拖放，我必须运行：

$('.order').draggable({
..
});

和

$('.employee').dropable({
..
});

因此，jquery 函数每 20 秒遍历一次空洞 DOM。 10-15 分钟后，应用程序变得非常缓慢。你知道如何增加这个过程吗？是否可以绝对声明每个 .order 类都是可拖动的，即使此元素将在第一次注册后创建？

【问题讨论】：

标签： javascript jquery ajax performance drag-and-drop

【解决方案1】：

我认为问题在于页面上已经存在的元素可以一遍又一遍地拖动。我认为一个解决方案是将一个类分配给那些已经拥有它的人：

$('.order').each(function() {
    var element = $(this);
    if ( !element.hasClass('event-already-attached')) {
        element.addClass('event-already-attached').draggable({

        })
    }
});

【讨论】：

这可能是个好主意！我会尝试给出一个共鸣！谢谢！

【解决方案2】：

感谢@Jonas，你的好主意做到了！

您可以将 ui-droppable 和 ui-draggable 类用于该工作

$('.order').each(function() {
    var element = $(this);
    if ( !element.hasClass('ui-droppable')) {

    element.droppable({
    ...
}
});

【讨论】：