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; } 
});