由絕對div的jQuery UI Droppable塊

Question

jquery ui droppable如何被覆蓋div阻塞？

看到這個例子：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。