如何确定 HTML 用户输入的高度和宽度并告诉 gridster 相应地适应？

Posted 2023-05-07

【中文标题】如何确定 HTML 用户输入的高度和宽度并告诉 gridster 相应地适应？

【英文标题】：How to determine the height and width of HTML user input and tell gridster to fit accordingly?

【发布时间】：2015-06-29 22:52:27

【问题描述】：

我目前正在将 Gridster.js (http://gridster.net/) 与 CKEditor 结合使用。

一旦用户使用 CKEditor 保存他们的内容，该内容就会被放入小部件中。然而，小部件不会自动调整大小以适应内容，虽然用户可以自己调整大小，但用户群在按下保存的那一刻为他们完成会更方便。

我尝试了一些东西，但没有任何效果。我无法获取当前内容的大小，然后分别调整网格大小。

在我的代码中，我有两个值可以使用。 gridster 元素 (widget)，以及将放入其中的值 (contents)。我必须确定contents 的高度。成功完成此操作后，我将能够确定获取 x 和 y 值的代码是否有效。

我当前的代码如下所示：

// Initialization of the gridster element.
// The base dimensions are relevant to understand how we 
// calculate the multipliers, later on.
gridster = $(".gridster > ul").gridster(
    widget_margins: [10, 10],
    widget_base_dimensions: [100, 50],
    draggable: 
        handle: 'header'
    ,
    resize: 
        enabled: true,
        max_size: [20, 10],
        min_size: [2, 1]
    
).data('gridster');

以及处理保存和调整大小的 javascript 类（相关部分）：

// Saves the content from CKEditor to the gridster widget
this.save = function (data) 
    var lastContents = this.default_html + data + '</div>';

    $(this.editor).removeClass('gs-w-new');
    this.resize_widget(this.editor, lastContents);
    $(this.editor).html(lastContents);
    this.modal.modal('hide');
;

/* @TODO: resize_widget function */
// if the new content from ckeditor is larger than the 
// original size of the widget, we need to make it larger.
this.resize_widget = function(widgetId, contents) 

    var element = $('<div>')
        .addClass('fake-div-gs-w-resize')
        /*
        .fake-div-gs-w-resize 
            position: absolute;
            display: none;
            height: auto;
            width: auto;
            white-space: nowrap;
        
        */
        .css('display', 'block')
        .html(contents);

    var widget = $(widgetId);

    var elementWidth = $(element).width(), // I am expecting this to return the width of the content, but it returns 0.
        elementHeight = $(element).height(), // As you might imagine, this also returns 0.
        width = widget.width(),
        height = widget.height();

    $(element).css('display', 'none');

    console.log(widgetId, widget, width, height, elementWidth, elementHeight);

    // this code never gets past here, because elementHeight,Width returns 0.
    if (elementHeight > height || elementWidth > width) 

        var width_multiplier = 100, // data-x = 1 === width_multiplier px
            height_multiplier = 50; // from "widget_base_dimensions: [100, 50],"

        var x = Math.round(width / width_multiplier),
            y = Math.round(height / height_multiplier),
            eX = Math.ceil(elementWidth / width_multiplier),
            eY = Math.ceil(elementHeight / height_multiplier);

        console.log("setting to x:" + eX + ", y:" + eY + " with width:" + width + ", height:" + height);

        if (eX >= x && eY >= y)
            gridster.resize_widget(widget, eX, eY);
    

;

虽然我对确定尺寸的逻辑并不完全有信心；这个问题的主要焦点是确定 HTML 内容的大小，因为我从其他 SO 帖子中收集的内容似乎对我的情况没有帮助。

【问题讨论】：

我猜你调用 resize_widget 函数太早了！尝试在 this.save 方法结束后调用 this.resize_widget，就像回调一样！或者只是尝试将该线移低..

【参考方案1】：

您需要将元素实际添加到 DOM，width() 和 height() 函数才能工作。在您的示例中，该元素未添加到文档中。

以这个 JS Fiddle 为例 https://jsfiddle.net/y1yf1zzp/10/

【讨论】：

很有趣，非常感谢。这似乎工作得很好。

【参考方案2】：

我遇到了同样的挑战，即出现在新图块内的动态内容导致溢出并出现在图块边界之外。我们将磁贴内容的“.scrollHeight”与 Zartus 的代码结合使用：

var contentHeight = $widgit.firstChild.scrollHeight;
var tileHeight = $widgit.firstChild.clientHeight;