Jquery ui draggable - 自动调整父级包含

Question

对不起，我的英语不是很好。我希望我的容器元素调整大小以始终包含其子元素。

访问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);
                        }

                    }
            }
        );    
});

Answer 1

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;

Answer 2

您可以使用以下内容来确定shouldHeight - 基本上：

1. 使用选择器获取所有可拖动的
2. 获取其高度并将其与您目前拥有的相比
3. 设置高度。

以下是如何：

的内容

        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/

Answer 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;

，您所询问的内容将是默认行为