동적으로 추가 된 드래그 가능 항목은 드래그되지 않습니다

Question

드래그 가능한 DIV를 동적으로 추가하고 있습니다. 드래그하기 위해 클릭 한 상태로 드래그하면 드래그되지 않습니다. 그래서처럼 추가 오전 :

$("#leftPersonalContent").append(leftSlotContent); 
$("#" + firstID).addClass("ui-draggable"); 

을 leftSlotContent 양식 이며 firstID는 "puzzlePiece_left_2"입니다.

요소가 나는 실제 코드가 생성 볼 (크롬) 요소 검사를 사용하고는 다음과 같습니다 추가 한 후에 :

<div id="puzzlePiece_left_2" class="personal draggable ui-draggable">....</div> 

왜 드래그하지 않을까요?

Answer 1

드래그를 설정하기 위해 코드를 실행했을 때 요소가 존재하지 않았기 때문일 가능성이 큽니다. 그걸 청취자 live()에 등록해야합니다.

편집

우리가 사건을 처리하지 않는 때문에, 나는 live()이 옵션을 선택하지 않습니다 같아요. 나는 곧 해결책을 취할 것이지만, 우선 현재 코드로 무슨 일이 일어나고 있는지 그리고 왜 그것이 작동하지 않는지에 대해 설명하게하겠습니다.

여기에 의견에 게시 한 스 니펫은 일련의 요소 ($('.draggable'))를 찾은 다음 시작하여 .draggable()을 호출하여 해당 코드를 드래그 할 수 있도록합니다. 첫 번째 선택기에 의해 반환되는 모든 요소는 드래그 가능하게 만들어집니다. 이것은 멀리 떨어져서 지속적으로 검사되는 모든 종류의 "규칙"이 아니라 기능을 적용 할 항목을 한 번만 검색하는 것입니다.

이 코드가 실행될 때 선택기 $('.draggable')은 그 시점에 존재하지 않으므로 결과 집합에서 DIV를 반환하지 않습니다. 갑자기 등장하게되면 드래그가 시작될 때 $('.draggable')에 의해 반환 된 항목 중 하나가 아니라는 사실이 변경되지 않습니다. 그러나 은이 반환 될 것입니다. 그러나 이제는 해당 쿼리가 실행되었으므로 정확히 동일한 쿼리를 다시 실행해야합니다.

그래서 새 항목을 추가 할 때마다 드래그 될하려면 먼저 파괴해야하는 현재 드래그 :

$('.draggable').draggable('destroy'); 

... 그리고 새로운 항목이있는 것을 지금, 그것은 한 번 더 만들 설정 :

$('.draggable').draggable({ your options... }); 

그럴 필요가 있습니다.

Answer 2

드래그 가능하게하려는 모든 요소를 ​​찾을 수있는 jquery 선택기가 있다고 가정하면 새로 추가 된 요소를 드래그 가능하게 만들려면 같은 선택기를 새 식에서 사용할 수 있습니다. UI 드래그 가능한 클래스가 없습니다.

$(".selector:not(.ui-draggable)").draggable(draggableOptions);