将项目拖入其中并达到限制时展开包含 div答案

【问题标题】：Expand containing div when dragging an item inside it and reaching limits将项目拖入其中并达到限制时展开包含 div
【发布时间】：2011-08-11 17:27:28
【问题描述】：

我的页面有几个可拖动和调整大小的项目（div）。我的代码如下：

part.draggable(
                     {
                                containment: 'parent',
                                drag: function(event, ui){
                                partIsDragging = true
                                part.prev().css('top', ui.position.top - 20 ).css('left', ui.position.left )
                                part.prev().show()
                           },
                                stop: function(event, ui) {
                                         partIsDragging = false
                            }
                              }).resizable({
                                 containment: 'parent',
                                 handles: 'ne, se, sw, nw,n,w,e,s',
                                 stop: function() {
                                            }                                        
                              });

这些的html结构如下：

<body>
<div id="wrapper">
    <div class="draggableItem"></div>
    <div class="draggableItem"></div>
    <div class="draggableItem"></div>
    <div class="draggableItem"></div>
</div>
</body>

在我的 css 文件中，我设置了 body height：100% 和 wrapper height：100%。包装器的宽度始终是固定的，宽度：950px。当 draggableItem 到达包装器的底部时，我希望我的 div 扩展高度。现在，当页面加载时，它的高度与分辨率允许的一样大，但如果我在包装器中有更多项目，那么一切都会变得混乱，我希望在拖动项目时以某种方式动态扩展包装器的高度。仅当我点击底部边框时才会发生这种情况。

PS：我正在使用 jQuery 和 jQuery-ui。

【问题讨论】：

你也可以发布你的相关css

标签： javascript jquery jquery-ui drag-and-drop jquery-ui-draggable

【解决方案1】：

我可能有一个解决方案。首先，我在适当的地方将part 替换为'.draggableItem' 和this。请告诉我这是否会以某种关键方式破坏代码。另外，我在下面的代码中删除了part.prev().css('top', ui.position.top - 20 ).css('left', ui.position.left )。

function adjustWrapperHeight(movingObject)
{
    var objectBottomPosition = $(movingObject).offset().top+$(movingObject).height()
    var wrapperBottomPosition = $("#wrapper").offset().top+$("#wrapper").height()
    if(wrapperBottomPosition-objectBottomPosition<distanceBuffer)
    {
        $("#wrapper").height($("#wrapper").height()+distanceBuffer+1)
    }
}

var distanceBuffer = 20;
$('.draggableItem').draggable(
        {
            containment: 'parent',
            drag: function(event, ui)
            {
                partIsDragging = true
                adjustWrapperHeight(this)
            },
            stop: function(event, ui)
            {
                partIsDragging = false
            }
        }).resizable(
        {
             handles: 'ne, se, sw, nw,n,w,e,s',
             resize: function(event, ui)
             {
                adjustWrapperHeight(this)
                var objectRightPosition = $(this).offset().left+$(this).width()
                var wrapperRightPosition = $("#wrapper").offset().left+$("#wrapper").width()
                if(wrapperRightPosition<=objectRightPosition)
                {
                    $(this).width(ui.originalSize.width)
                    var containmentLeftPosition = wrapperRightPosition-$(this).width()
                    $(this).offset({top:$(this).offset().top,left:containmentLeftPosition})
                }
             }                                    
         })
        })

函数adjustWrapperHeight(movingObject) 根据movingObject 的底部位置调整div#wrapper 的高度。也就是说，当movingObject“向上推”div#wrapper 的边框时，它会调整div#wrapper 的高度。

我不得不对resizable 使用hack。 containment: 'parent' for resizable（但不是 draggable）将容器设置为容器的 ORIGINAL 高度左右。这意味着随着div#wrapper 的高度动态变化，containment: 'parent' 设置的约束不会动态变化。为了解决这个问题，我删除了containment: 'parent' 和整个containment，并确保div#wrapper 的正确包含不会在resize 事件中被破坏。请注意，您可能也应该使用div#wrapper 的左侧容器来执行此操作。

请告诉我这是否有帮助。谢谢。

【讨论】：

您的解决方案效果很好！谢谢你做了这么棒的东西！我已经调整了代码以满足我的需要，因为我正在处理需要可拖动和调整大小的多个包装器和 div，我必须向 adjustWrapperHeight 函数添加另一个参数，即需要调整大小的包装器对象。