jQuery UI Draggable-自动调整父容器的大小 [英] Jquery ui draggable - auto resize parent containment

问题描述

对不起，我的英语不太好.我希望容器元素的大小能够始终包含其子元素.

I am sorry my English is not that great. I would like my container element to resize to always contain its child elements.

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

                    }
            }
        );    
});

推荐答案

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;

这篇关于jQuery UI Draggable-自动调整父容器的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！