Javascript 在拖动项目并达到限制时展开包含div_Javascript_Jquery_Jquery Ui_Drag And Drop_Jquery Ui Draggable

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

javascript jquery jquery-ui

Javascript 在拖动项目并达到限制时展开包含div,javascript,jquery,jquery-ui,drag-and-drop,jquery-ui-draggable,Javascript,Jquery,Jquery Ui,Drag And Drop,Jquery Ui Draggable,我的页面有几个可拖动和可调整大小的项目（div）。我的代码如下所示： part.draggable( { containment: 'parent', drag: function(event, ui){ partIsDragging = true

我的页面有几个可拖动和可调整大小的项目（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。当DragableItem到达包装器的底部时，我希望我的div在高度上扩展。现在当页面加载时，它的高度与分辨率允许的高度一样大，但是如果包装中有更多的项目，那么一切都会变得混乱，我希望在拖动项目时以某种方式动态扩展包装的高度。只有当我到达底部边界时，才会发生这种情况

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

我可能有一个解决方案。首先，我用

'.draggableItem'

替换了

部分

，并在适当的地方替换了

此

。请告诉我，如果这在某种程度上破坏了代码。此外，我删除了下面代码中的

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

功能调整包装高度（移动对象）
{
var objectBottomPosition=$（movingObject.offset（）.top+$（movingObject.height（））
var wrapperBottomPosition=$（“#wrapper”）.offset（）.top+$（“#wrapper”）.height（）
if（wrapperBottomPosition objectBottomPosition我可能有一个解决方案。首先，我用'.draggableItem'
替换了部分
，并在适当的地方替换了这个
。请告诉我这是否以某种关键方式破坏了代码。此外，我删除了部分.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})
                }
             }                                    
         })
        })

功能调整包装高度（移动对象）
{
var objectBottomPosition=$（movingObject.offset（）.top+$（movingObject.height（））
var wrapperBottomPosition=$（“#wrapper”）.offset（）.top+$（“#wrapper”）.height（）
如果（wrapperBottomPosition ObjectBottomPosition你也可以发布你的相关css吗？你的解决方案工作得很好！感谢你做了这么了不起的事情！我已经调整了代码以满足我的需要，因为我要处理多个需要可拖动和可调整大小的Wrapper和div，我不得不添加另一个argum对于adjustWrapperHeight函数，这是需要调整大小的包装器对象。您的解决方案工作得很好！感谢您所做的这件令人惊讶的事情！我已经调整了代码以满足我的需要，因为我正在处理多个需要可拖动和可调整大小的包装器和div，我必须为AdjustWrapper添加另一个参数ight函数，即需要调整大小的包装器对象。