jQuery UI Droppable/Draggable

Question

Here is my JS Fiddle.

JS Fiddle에는 'drappables'라는 div 내에 3 개의 Droppables가 있으며 'draggables'라는 div 내 3 개의 Draggables가 있습니다. drappables 중 하나를 droppables로 드래그하면 해당 div가 데이터로 업데이트됩니다.

draggable을 이미 드래그 가능한 drappable로 드래그하여 '덮어 쓰기'할 수도 있습니다. 이렇게하면 이전 draggable을 draggables 목록에 추가합니다.

if(counter != 1) 
     { 
      $(this).find('.ui-draggable').appendTo($('#draggables')); 
      counter = 1; 
     } 

여기에 문제가 있습니다. 한 drappable에서 다른 drappable로 draggable을 드래그한다면, 이제는 기술적으로 null이고 void 인 div의 값은 여전히 ​​이전 draggable의 값을 표시합니다.

Answer 1

두 번째 시도. http://api.jqueryui.com/draggable/#event-start

시작 이벤트가 발생하면, ui.helper가 ui.helper.prevObject이 위치에 여전히 이전 객체 동안 끌고있는 새로운 임시 개체는 다음과 같습니다

당신은 드래그의 start 및 stop 기능을 사용해야합니다.

ui.helper은 여전히 ​​임시 객체로 드래그되고 ui.helper.prevObject은 새로운 객체입니다 (prevObject라고 불리기 때문에 조금 혼란 스럽지만 작동하는 것처럼 보입니다).

prevObjects는 두 경우 모두 "올바른"위치에 있으므로 정확한 droppable 컨테이너를 찾고 카운터, 텍스트 및 다른 "정리"작업을 업데이트 할 수 있습니다. 해야 할 것.

나는 시작 이벤트에서 모든 글로벌 변수를 준비하는 것이 좋습니다. draggable을 다른 droppable에 놓았지만 실제 정리를 stop 이벤트로 지연 시키면 정리를 수행해야합니다 (미리 확인하십시오 실제로 필요한 경우).

당신은 낙하 할에 out 이벤트를 사용해야합니다 http://api.jqueryui.com/droppable/#event-out 당신의 드래그 중 하나가 낙하 할을 떠날 때 가로 챌 수 있습니다.

몇 분 안에 코드를 작성해 드리겠습니다.