drag & drop not working when page loaded in a parent 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.

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.

Here is the drag/drop code

$(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',    
  });

} }

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

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

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?

回答1:

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

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.

来源：https://stackoverflow.com/questions/21716649/drag-drop-not-working-when-page-loaded-in-a-parent-div

标签

jquery

drag-and-drop