jQuery UI Droppable - 阻止覆盖区域

Question

我正在使用 jqueryui draggable/droppable 设计一个相当棘手的布局。

在一个部分中，div 容器内有一个可放置区域。容器已溢出:隐藏，但包含的可放置对象超出了容器的边界。

具体来说，假设我有一个 200 像素高的可放置组件包含在一个 100 像素高的 div 中，带有 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();