jQuery UI draggable을 컨테이너 뒤에 놓을 수 있습니다.

Question

나는 drappables의 탁월한 그리드와 draggables의 고아 컨테이너를 가지고 있습니다. 고아 컨테이너는 스크린의 1/3을 차지하고 고정 된 위치에있는 유적지 그리드 상단에 놓여져 떨어지는 그리드 주위를 이동할 수 있습니다. 고아 컨테이너의이 항목을 그 뒤에있는 droppable 버킷으로 드래그합니다. 고아 컨테이너에서 항목을 간신히 드래그하면 그 컨테이너의 뒤쪽으로 이동하여 삽입 될 수 있습니다. 그렇게하지 않는 방법이 있을까요? 고아가 아닌 곳으로 이사하지 않은 경우 고아 컨테이너에 머물러있게하십시오.

아래 이미지는 예정되지 않은 게임이라고 불리는 고아 컨테이너를 보여줍니다. B1과 B2를 간신히 드래그하면 고아 컨테이너에 머 무르지 않고 작은 컨테이너에 드롭됩니다. 그래서 사라지는 것처럼 보입니다.

는 업데이트 :

나는 모두 내 droppables "드롭"이벤트가 박히는 것으로 나타났습니다. 고아 컨테이너가 히트 한 다음 두 번째 컨테이너가 히트되고 두 번째 컨테이너가 히트합니다.

Answer 1

드래그 가능한 항목에 클래스를 추가하고 고아 컨테이너의 오버/아웃 이벤트에서이를 제거하여이 문제를 해결했습니다.

  over: function(event, ui) { 
       $(ui.draggable).addClass('orphan-droppable'); 
      }, 
      out: function (event, ui) { 
       $(ui.draggable).removeClass('orphan-droppable'); 
      } 

요소가 그리드에있는 경우 테스트 할 수 있습니다. 클래스에서 요소가 발견되면 무시합니다.

drop: function (event, ui) { 

         if (!$(ui.draggable).hasClass('orphan-droppable')) { 
// Work on element 
} 

Answer 2

droppables 그리드를 사용하지 않도록 설정하고 고아 컨테이너의 "out"및 "over"이벤트를 들어 봅니다. 출력이 트리거되면 그리드를 활성화하고 다시 켜면 비활성화됩니다.