在我用Ajax重新加载一部分网页后,Draggable停止工作

重新加载包含可拖动项的DIV时,将从中删除可拖动功能(它们是新的DOM元素,而不是已将可拖动项附加到它们上的旧元素)。

每次加载这些分区时,都需要重新附加可拖动功能。下面是如何使用jquery.live()来实现所需功能的示例:

JQuery Live and Draggable

注意:从jquery 1.7开始, .live() 现在不赞成 .on() . 然而,无论采用哪种方式,问题仍然存在:在Ajax重新加载之后,为了自动重新附加可拖动功能,应该绑定到哪种类型的事件?我试过了 load , change , mousedown , click …他们都没用。此外, the solution Justin linked to 仅适用于使用 simplemodal 插件。

我发现的解决方案是将设置可拖动和/或可拖放的代码提取到一个单独的函数中,然后在Ajax响应重新加载页面的相关部分后,该函数可以被重新调用。

因此,主要的javascript代码变成:

function init_draggables_and_droppables() {
    $(".draggable").draggable({ revert: 'invalid' });
    ...
}

jQuery(function($) {
    init_draggables_and_droppables();
    ...
});

然后Ajax响应包含:

jQuery("div.to-reload").replaceWith(reloaded);
init_draggables_and_droppables();

工作得很好!

您必须为此使用live()方法。查看文档: .live()