Question

我已经实现了draggable和droppable jquery函数。他们工作。

但是，如果我重新加载网站的一部分，他们就会停止工作。

例如，我通过AJAX重新加载包含可拖动项目的div（以获取更新的项目），突然间我无法拖放这些新项目。虽然我没有使用javascript代码重新加载网页的部分，所以它仍然可以工作。

Answer 1

当你重新加载包含可拖动项目的div时，你将从它们中删除可拖动的功能（它们是新的DOM元素，而不是附加了拖动的旧元素）。

每次加载这些div时，都需要重新附加可拖动的功能。这是一个如何使用jQuery.live（）来实现所需内容的示例：

Answer 2

N.B。从JQuery 1.7开始，.live()现已弃用，而不是.on()。但是，无论哪种方式，问题仍然存在：应该绑定哪种类型的事件，以便在AJAX重新加载发生后自动重新附加可拖动的功能？我尝试了load，change，mousedown，click ......这些都没有奏效。此外，the solution Justin linked to仅适用于使用simplemodal插件时。

我找到的解决方案是提取将draggable（s）和/或droppable设置为单独函数的代码，然后在重新加载页面的相关部分后，可以通过AJAX响应重新调用该函数。 / p>

因此主要的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();

很好用！

Answer 3

你必须使用live（）方法。请查看文档：{{3}}

使用AJAX重新加载部分网页后，Draggable停止工作

3 个答案: