在父 div 中加载页面时拖放不起作用

Question

我有一个应用程序，它包含 32 个名称的列表，并允许将它们拖放到 9 个单独的 div 中，然后在这 9 个 div 之间拖放。

当页面单独执行时，它可以完美运行。

但是，当页面加载到父 div 中时，功能会变得很糟糕。我只能拖放一次。当我尝试将名称从九个 div 之一拖放到另一个 div 时，我可以拖动它，但是当它被放下时，它会返回到原来的位置。

这是拖放代码

$(document).ready (function (){

$('.draggable').draggable(
{revert:'invalid'}
)



$('.droppable').droppable({
    tolerance:'intersect',
    drop: function (event,ui){
    $(this).addClass ('person');
    $(this).append ('<p class="draggable">'+$(ui.draggable).text()+'</p>');
    $(ui.draggable).remove();
    $('.draggable').draggable({
      revert:'invalid',    
  }); 

} }

这是将页面加载到父 div 中的简单代码

$('button.worklist').click (function (){
   $('div#content').load ('worklist.php');
})

所以问题就变成了，当 UI 事件页面加载到 div 时，我需要做些什么才能让它们正常运行吗？

Answer 1

将worklist.php的内容加载到div#content后，需要重新初始化拖放功能。

拖放功能在document.ready() 中仅针对当前页面上的项目进行初始化。如果页面中添加了更多的项目，则需要重新初始化拖放方法。