부모 div에 페이지를로드 할 때 드래그 앤 드롭이 작동하지 않습니다.

Question

32 개의 이름 목록을 가져와 9 개의 div로 드래그 앤 드롭하고 9 개의 div간에 드래그 앤 드롭 할 수있는 응용 프로그램이 있습니다.

페이지가 단독으로 실행되면 완벽하게 작동합니다.

그러나 페이지가 부모 div에로드되면 기능이 지옥으로 넘어갑니다. 한 번만 드래그 앤 드롭 할 수 있습니다. 9 개의 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',  
    }); 

} }

입니다 그리고 여기

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

그래서 문제가되고 부모 DIV로 페이지를로드하는 간단한 코드입니다, 그들이 행동을 페이지에 div 때로드 될 때 제대로 작동하도록 UI 이벤트를 얻으려면 할 필요가있는 여분의 무엇입니까?

Answer 1

worklist.php에서 div#content으로 콘텐츠를로드 한 후에는 끌어서 놓기 기능을 다시 초기화해야합니다.

끌어서 놓기 기능은 현재 페이지에있는 항목에 대해서만 document.ready()으로 초기화됩니다. 페이지에 항목을 더 추가하는 경우 끌어서 놓기 방법을 다시 초기화해야합니다.