이 매우 기본적인 드래그/드롭 가능한 설정을 상상해 다른 스택 레벨

Question

에있는에도 불구하고 draggables에 민감 낙하 할 :

<div class="container"> 
    <div id="dropArea"></div> 
</div> 
<div id="itemBox"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 

#dropArea가 낙하 할 것입니다.

#itemBox > .item은 draggables입니다.

어떤 이유에서든 drappable이 draggable에 반응합니다. 심지어 draggable도 #itemBox에서 드래그되지 않았습니다.

See this fiddle for a live example.

나는 완벽하게 정확하다고 확신하지만 이것으로 인해 당혹 스럽다. draggable/droppable이 어떻게 행동하는지에 대한 오해입니다.

body과 #itemBox에 draggable을 추가하려고 시도했지만 효과는 동일하게 유지됩니다. 나는 또한 다양한 z-index 설정 (droppable을 z-index보다 #itemBox보다 낮게 설정)을 시도해 보았지만 아무 소용이 없었다.

왜 이런 일이 일어나고 어떻게 피할 수 있습니까? drappable이 drableable이 실제로는 #itemBox을 떠난 후에 만 ​​반응해야합니다. 항목 itemBox 위에있을 때

Answer 1

여기 itemBox 장애인 dropArea에 업데이트 된 jsFiddle

추가 낙하 할 수 있다는 것입니다. 샘플 코드 :

$('#itemBox').droppable({ 
    hoverClass: 'dragHover', 
    over:function(){ 
     $('#dropArea').droppable('disable').removeClass('ui-state-disabled dragHover');  
    }, 
    out:function(){ 
     $('#dropArea').droppable('enable').addClass('dragHover'); 
    } 
});