Question

我的页面有几个可拖动和可调整大小的项目（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文件中，我设置了身高：100％和包装纸高度：100％。包装器的宽度始终是固定的，宽度：950px。当draggableItem到达包装器的底部时，我希望我的div在高度上扩展。现在当页面加载时，它的高度与分辨率允许的一样大，但是如果我在包装器中有更多的项目，那么一切都变得杂乱，我想拖动一个项目以某种方式动态地展开包装器的高度。只有在我触及底部边框时才会发生这种情况。

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

Answer 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)根据div#wrapper的最低位置调整movingObject的高度。也就是说，当movingObject＆＃34;推升时＃34;对于div#wrapper的边框，它会调整div#wrapper的高度。

我不得不使用resizable的黑客攻击。 containment: 'parent'的{{1}}（但不是resizable）将容器设置为容器的 ORIGINAL 高度左右。这意味着当draggable的高度动态变化时，div#wrapper设置的约束不会动态变化。为解决此问题，我删除了containment: 'parent'以及整个containment: 'parent'，并确保在containment事件中div#wrapper的正确遏制不会被破坏。请注意，您也应该使用resize左边的包含来执行此操作。

请告诉我这是否有用。谢谢。

在拖动其中的项目并达到限制时展开包含div

1 个答案: