拖曳在父div中加载页面时，drop无法正常工作 [英] drag & drop not working when page loaded in a parent div

问题描述

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

I have an application that takes a list of 32 names and allows them to be dragged and dropped into nine separate divs and then to be dragged and dropped between those nine divs.

单独执行页面时，它可以完美工作.

When the page is executed stand alone, it works flawlessly.

但是，当页面被加载到父div中时，该功能会崩溃.我只能拖放一次.当我尝试将名称从9个div中的一个拖放到另一个div时，我可以将其拖放到正确的位置，但是当它拖放时，它会返回其原始位置.

However, when the page is loaded into a parent div the functionality goes to hell. I can drag and drop one time only. When I attempt to drag/drop a name from one of the nine divs, to another div, I can drag it okay but when it is dropped it returns to its original position.

这是拖放代码

$(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中的简单代码

And here's the simple code to load the page into the parent div

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

问题就变成了，当将UI页面分页加载到div中时，我需要做些其他事情才能使UI事件正常运行吗?

So the question becomes, is there anything extra I need to do to get UI events to function properly when they page the act upon is loaded into a div?

推荐答案

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

After you load the content from worklist.php into div#content, you need to re-initialize the drag and drop functions.

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

The drag and drop functions are initialized in document.ready() for only the items that are currently on the page. If you add more items to the page, you need to re-initialize the drag and drop methods.

这篇关于拖曳在父div中加载页面时，drop无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！