javascript - Jquery ui draggable - 自动调整父容器的大小

<分区>

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

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

                    }
            }
        );    
});

最佳答案

您可以使用以下内容计算出 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;
            }
        });

fiddle :http://jsfiddle.net/LakYy/3/

关于javascript - Jquery ui draggable - 自动调整父容器的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23791878/

上一篇：javascript - 单击图像 jQuery - 函数在附加后不起作用

下一篇：javascript - 如何自定义Gauge控件？

javascript - 单独适用于页面上多个元素的方法

javascript - 使用javascript获取行数

javascript - Jquery myfunction 未定义

jquery - 可排序和可删除 : CSS preventing jquery-ui sortable to drag around the dropped items

javascript - 在 HTML 超链接标记的 onClick 中调用 JavaScript 函数 ping() 导致 TypeError

jquery - 求div上scrollTop的最大底部值？

javascript - 返回javascript中两个字符串数组差异的函数

javascript - 使用 JQuery 将 <span> 拖放到段落中

jquery - 打开多个 Accordion 选项卡