jQuery UI 절대 div로 Droppable 블록

Question

오버레이 된 div에 의해 jquery UI가 삭제 될 수있는 방법은 무엇입니까?

예 : http://jsfiddle.net/JSFU4/3/을 참조하십시오. 빨간색 div가 드롭 가능 영역을 오버레이합니다. 그러나이 영역의 위쪽으로 드래그하면 해당 드롭이 여전히 활성화됩니다. 어떻게 피할 수 있습니까?

HTML을

<div> 
    <div class="drop">drop here</div> 
</div> 
<div> 
    <div class="drag">drag me</div> 
</div> 
<div class="overlay">i want to block the droppable</div> 

CSS

.drag { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    background-color: lightblue; 
    z-index: 1; 
} 
.drop { 
    display: inline-block; 
    border: 1px dotted black; 
    width: 200px; 
    height: 200px; 
} 
.drop-hover { 
    background-color: grey; 
} 
.overlay { 
    position: absolute; 
    width: 300px; 
    height: 100px; 
    top: 50px; 
    background-color: red; 
    border: 1px solid black; 
} 

JS

$(function() { 
    $('.drag').draggable(); 
    $('.drop').droppable({ 
    tolerance: 'pointer', 
    hoverClass: 'drop-hover'  
    }); 
}); 

Answer 1

내가 이것을 달성하기 위해 상자의 밖으로 거기에 아무것도 생각하지 않습니다. 어떤 종류의 충돌 탐지를 수행 한 다음 그에 따라 논리를 수행해야합니다. 나는 너를 위해 POC를 해왔다.

DEMO

var drag = $('.drag'); 
var overlay = $('.overlay'); 

$(function() { 
    $('.drag').draggable(); 
    $('.drop').droppable({ 
    tolerance: 'pointer', 
    hoverClass: 'drop-hover' 
    }); 
}); 


var int = self.setInterval(function() { 
    if (overlaps(drag, overlay)) { 
    $('.drop').css('visibility', 'hidden'); 
    } else { 
    $('.drop').css('visibility', 'visible'); 
    } 
}, 100); 


var overlaps = (function() { 
    function getPositions(elem) { 
    var pos, width, height; 
    pos = $(elem).position(); 
    width = $(elem).width()/2; 
    height = $(elem).height(); 
    return [[pos.left, pos.left + width], [pos.top, pos.top + height]]; 
    } 

    function comparePositions(p1, p2) { 
    var r1, r2; 
    r1 = p1[0] < p2[0] ? p1 : p2; 
    r2 = p1[0] < p2[0] ? p2 : p1; 
    return r1[1] > r2[0] || r1[0] === r2[0]; 
    } 

    return function (a, b) { 
    var pos1 = getPositions(a), 
     pos2 = getPositions(b); 
    return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]); 
    }; 
})(); 

코드는 상기 두 된 DIV 간의 충돌을 검출하고 true 또는 false를 반환한다.