jQuery UI Droppable - 阻止覆蓋區域

Question

我正在使用jqueryui draggable/droppable相當棘手的佈局。

在一個部分中，div容器內有可投放區域。容器溢出：隱藏，但包含的容器超過容器的邊界。

具體而言，比方說，我有一個200px高的droppable包含在一個100px高的div w/overflow：hidden中。

問題：拖動可拖動的元素時，它會將整個200px可放置區域視爲可放置區域，即使通過容器僅放置100px也是如此。

如何讓draggable/droppale只尊重droppable的可見區域？

注意：此設計是包含許多可放置對象的較大複雜接口的一部分，並且此設置有正確的原因。不會考慮「改變你的標記」的解決方案。

Answer 1

JSFiddle

可以使孩子可放開元調整到家長的高度和寬度每當父調整大小。設置該偵聽器後，只需觸發父級調整大小事件，並且可放置容器將始終匹配父級的寬度&。

$("#drop-container").resize(function(){ 
    $(this).find('#drop-content').width($(this).width()); 
    $(this).find('#drop-content').height($(this).height()); 
}); 
$("#drop-container").trigger('resize'); 
$("#drop-content").droppable({ 
    accept: '.special', 
    hoverClass: 'dropme' 
}); 

$(".special").draggable(); 

Answer 2

這裏是一個解決方案，當你有一個表作爲內容也適用，但使用全局變量：

Sample when content is table

var DIV_AREA_OVER = false; 

$("#drop-container").resizable(); 
$("#drop-container").droppable({ 
    hoverClass: 'dropme', 
    over: function() { DIV_AREA_OVER = true; }, 
    out: function() { DIV_AREA_OVER = false; } 
}); 
$("#table-content td").droppable({ 
    hoverClass: 'dropme', 
    drop: function() { 
     var wrap = $(this).closest('#drop-container'); 
     if (DIV_AREA_OVER == true) { 
      $(this).addClass("accepted"); 
     } 
    } 
}); 
$(".special").draggable({ 
    start: function() { DIV_AREA_OVER = false; }, 
    stop: function() { DIV_AREA_OVER = false; } 
});