Question

我正在使用jqueryui draggable / droppable进行相当棘手的布局。

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

具体而言，假设我有一个200px高的droppable包含在100px高的div中溢出：隐藏。

问题：当拖动可拖动元素时，它会将整个200px可放置区域视为可放置，即使只有100px通过容器暴露。

如何才能让draggable / droppale只尊重droppable的可见区域？

注意：此设计是包含许多可放置的较大复杂界面的一部分，并且存在此设置的正当理由。 “改变你的标记”的解决方案将不予考虑。

Answer 1

JSFiddle

只要父级调整大小，您就可以将子级droppable元素调整为父级的高度和宽度。设置该侦听器后，只需触发父调整大小事件，并且可放置容器将始终匹配宽度＆amp;父母的身高。

$("#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; }
});

jQuery UI Droppable - 阻止覆盖区域

2 个答案: