2

我正在使用 jqueryui 可拖放/可拖放进行相当棘手的布局。

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

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

问题：当拖动一个可拖动元素时，它认为整个 200px 的可放置区域都是可放置的，即使只有 100px 通过容器暴露出来。

我怎样才能让可拖动/droppale 只尊重可放置的可见区域？

注意：此设计是包含许多 droppable 的较大复杂界面的一部分，并且此设置有正当理由。将不考虑“更改您的标记”的解决方案。

4

2 回答 2

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();
于 2013-02-13T21:53:37.337 回答
1

当您将表格作为内容但使用全局变量时，这是一个解决方案：

内容为表格时的示例

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; }
});
于 2014-08-27T17:43:10.630 回答