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

发布于 2024-11-29 06:41:38 字数 1518 浏览 0 评论 0原文

我的页面有几个可拖动和调整大小的项目（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。

原文

My page has several items (divs) that are draggable and resizable.
My code for doing this is given below:

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() {
                                            }                                        
                              });

The html structure for these is the following:

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

In my css files i have set body height: 100% and wrapper height: 100%. Width is always fixed for wrapper, width: 950px. I want my div to expand in height when the draggableItem reaches the bottom of the wrapper. Right now when the page is loaded, it has the height as big as the resolution allows it but in case I have more items in the wrapper then everything becomes cluttered and I would like when dragging an item to somehow expand the wrapper in height dynamically. This should happen only if I hit the bottom border.

PS: I am using jQuery and jQuery-ui.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

十年九夏 2024-12-06 06:41:38

我也许有解决办法。首先，我在适当的情况下将 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 的高度。

我不得不使用可调整大小的技巧。 resized 的 containment: 'parent' （但不是 draggable）将容器设置为容器的 ORIGINAL 高度或看来是这样。这意味着当 div#wrapper 的高度动态变化时，containment: 'parent' 设置的约束不会动态变化。为了解决这个问题，我删除了 containment: 'parent' 以及整个 containment 并确保 div#wrapper 的正确包含不存在在 resize 事件中损坏。请注意，您可能也应该使用 div#wrapper 的左侧遏制来执行此操作。

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

I may have a solution. First off, I replaced part with '.draggableItem' and this where appropriate. Please tell me if that breaks the code in some critical way. In addition, I removed part.prev().css('top', ui.position.top - 20 ).css('left', ui.position.left ) in the code below.

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})
                }
             }                                    
         })
        })

The function adjustWrapperHeight(movingObject) adjusts div#wrapper's height depending on a movingObject's bottom position. That is, when movingObject "pushes up" against div#wrapper's borders, it adjusts div#wrapper's height.

I had to use a hack for resizable. The containment: 'parent' for resizable (but not draggable) sets the containment to the container's ORIGINAL height or so it seems. That means as the height of div#wrapper dynamically changes, the constraint set by containment: 'parent' does not dynamically change. To fix this, I removed containment: 'parent' and indeed the entire containment and ensured that div#wrapper's right containment isn't broken within the resize event. Note that you should probably do this with div#wrapper's left containment as well.