Jquery ui draggable - 自动调整父容器的大小[重复]答案

【问题标题】：Jquery ui draggable - auto resize parent containment [duplicate]Jquery ui draggable - 自动调整父容器的大小[重复]
【发布时间】：2014-05-21 19:13:42
【问题描述】：

很抱歉我的英语不是那么好。我希望我的容器元素调整大小以始终包含其子元素。

访问jsfiddle.net/datakolay/LakYy/

$(document).ready(function() {
    var
        $document = $(document),
        $parent = $("#parent"),
        $container = $(".container", $parent),
        offset = $container.offset(),
        scrollbarSafety = 15; 

    $container.height($document.height() - offset.top - scrollbarSafety);

    $("#eleman,#eleman2")
            .draggable(
            {
                containment: $container,
                drag:
                    function(event, ui)
                    {
                        var
                            $draggee = $(this),
                            draggeePosition = $draggee.position(),

                            shouldHeight = draggeePosition.top + $draggee.height() + 15;

                        if($parent.height() < shouldHeight)
                        {
                            $parent.height(shouldHeight);
                        }

                        if($parent.height() > shouldHeight)
                        {
                            $parent.height(shouldHeight);
                        }

                    }
            }
        );    
});

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

您可以使用以下方法找出shouldHeight - 本质上：

使用选择器获取所有可拖动对象
获取它的高度并将其与您当前的高度进行比较
设置高度。

这是如何做的主要内容：

        var shouldHeight = 0;

        $(".ui-draggable").each(function () {
            var draggeePosition = $(this).position();

            if (shouldHeight < draggeePosition.top + $(this).height() + 15) {
                shouldHeight = draggeePosition.top + $(this).height() + 15;
            }
        });

小提琴：http://jsfiddle.net/LakYy/3/

【讨论】：

如果父级是固定高度并且容器的高度应该随着拖动而增加，因此应该出现滚动条，如何处理？ - jsfiddle.net/LakYy/6

【解决方案2】：

http://jsfiddle.net/LakYy/5/

$(document).ready(function() {
    var
        $document = $(document),
        $parent = $("#parent"),
        $container = $(".container", $parent),
        offset = $container.offset(),
        scrollbarSafety = 15; 

    $container.height($document.height() - offset.top - scrollbarSafety);

    $("#eleman,#eleman2")
            .draggable(
            {
                containment: $container,
                drag:
                    function(event, ui)
                    {
                        var shouldHeight = getdraggablemaxheight();

                        if($parent.height() < shouldHeight)
                        {
                            $parent.height(shouldHeight);
                        }

                        if($parent.height() > shouldHeight)
                        {
                            $parent.height(shouldHeight);
                        }

                    }
            }
        );    
});

function getdraggablemaxheight() {
    var $parent = $("#parent"),
        $container = $(".container", $parent),
        maxheight = 0,
        currentheight = 0,
        currentposition;

    $container.children().each(function(index, element) {
        currentposition = $(element).position();
        currentheight = currentposition.top +  + $(element).height() + 15;
        if(currentheight > maxheight)
            maxheight = currentheight;
    });

    return maxheight;

【讨论】：

如果父级是固定高度并且容器的高度应该随着拖动而增加，因此应该出现滚动条，如何处理？ - jsfiddle.net/LakYy/6

【解决方案3】：

根据@caspian 的解决方案，您可能会发现这种变化可以更好地适应许多可拖动对象。同样的事情，但每个项目只能找到一次 dom 位置：

        $(".ui-draggable").each(function () {
            var draggeeHeight = $(this).position().top + $(this).height() + 15;
            if (shouldHeight < draggeeHeight) {
                shouldHeight = draggeeHeight;
            };
        });

        if ($parent.height() != shouldHeight) {
            $parent.height(shouldHeight);
        }

我的项目也需要这个，这是小提琴 http://jsfiddle.net/genkilabs/WCw8E/2/

对于@coding_idiot，如果您使用overflow-x: scroll;，您所问的将是默认行为

【讨论】：