Question

我有一个应用程序，它接受32个名字的列表，并允许它们被拖放到九个单独的div中，然后在这九个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');
})

所以问题变成了，当他们将行为加载到div中时，我需要做些什么才能使UI事件正常运行？

Answer 1

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

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

拖着;在父div中加载页面时丢弃不起作用

1 个答案: