Question

我有一个可通过jquery调整大小和可拖动的div。

使用niceedit也可以编辑。

我遇到的问题是当我在div中添加更多文本时，在editmode中，div不会扩展以适应文本，文本溢出div。

有没有人知道如何从更新的内容更新div的高度和宽度？

您可以在此示例中看到，如果您开始添加文本，则框不会展开：

匹配jsfiddle的代码

.dragbox {
position:absolute;
width:10px;
height:25px;
padding: 0.0em;
margin:25px;
cursor:move;
z-index:2
}

#draggable {
min-width:150px;
min-height:150px;
height:auto;
width:auto;
border:1px solid #ff0000;
padding:25px;
}



//<![CDATA[
bkLib.onDomLoaded(function () {
    var myNicEditor = new nicEditor();
    myNicEditor.setPanel('myNicPanel');
    myNicEditor.addInstance('draggable');
});
//]]>


$("div.dragbox").dblclick(function (e) {
    $('.dragbox').css('cursor', 'select');
    $(this).draggable('disable').removeClass('ui-state-disabled').focus();
    }).on('blur', function () {
    $(this).draggable('enable');
});

$(function () {
    $("#draggable").draggable().resizable();
});


<div id="myNicPanel" style="width: 525px;"></div>
<div id="draggable" class="dragbox" contenteditable="true" style="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor</div>

Answer 1

我仍然是编程的菜鸟，因此可能有更好的解决方案。但我可以告诉你我对类似问题所做的工作。不确定这是否是你需要的。

function getHeight(id)
{
    if(document.getElementById(id) == null)
        return Number(0);
    else
    return document.getElementById(id).offsetHeight; // Change to .offsetWidth to gain width :)
}

您可以通过向ID og发送要获取宽度/高度的元素来创建和调用此函数。该函数首先检查ID是否存在，否则返回0.如果是，则返回内部宽度/高度。如果您100％确定您要求的ID存在，则只需要该功能的最后一行。

您可以像这样使用它：

var h = getHeight("draggable");

这将返回可拖动div的高度并将其存储在变量h。

中

希望它有用：）

Answer 2

使用可调整大小的小部件的stop事件来获取高度 - 你遇到的问题是，如果你将文本包装在另一个元素中，你可以将文本包装在另一个元素中，如果不是这里的hackey解决方案你也可以将它用于css

#draggable {word-wrap:break-word;}

为js使用类似的东西

$("#draggable").draggable().resizable({stop: function( event, ui ) {
        var tempHeight = $(this).css({"height" : "auto"}).height();
        $(this).css({"height" : "0px"}).animate({
        height : tempHeight
        },1000);
        }
     });

http://jsfiddle.net/j6FLa/26/

<强>更新我已经更新了我的小提琴，在那里添加了一个额外的p元素并将其设置为你可能更喜欢的p的最小高度

http://jsfiddle.net/j6FLa/28/

html

<div id="myNicPanel" style="width: 525px;"></div>
<div id="draggable" class="dragbox" contenteditable="true" style=""><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor asdfa asdfasdf asdf</p></div>

js

$(function () {
    $("#draggable").draggable().resizable({stop: function( event, ui ) {
        var pHeight = $(this).children('p').height();
        $(this).css('min-height', pHeight);
        }
     });
    $("#draggable").on( "dragstop", function( event, ui ) {alert('yes');} );
});

Answer 3

我之前的回答只能找到高度/宽度，但实际上并没有改变div本身的高度/宽度。

所以在使用我之前的答案找到宽度/高度之后，这里是如何更改相关div的宽度/高度。

让我们说你的div ID是“可拖动的”而你的p ID是“text”。编辑完文本后，可以通过调用函数（定义如下）来更新宽度和高度。

resize("draggable", "text");

你可以在javascript中模仿CSS样式：

function resize(id1, id2)
{
    var divName = document.getElementById(id1);
    divName.style.position = absolute;
    divName.style.width = getWidth(id2)+"px"; // remember the +"px"!!
    divName.style.height = getHeight(id2)+"px";
}

这会将div的高度和宽度设置为等于文本区域的高度和宽度。通过这样做，您可以根据项目中的任何其他更改任何给定ID的高度和宽度。 getWidth（）和getHeight（）是对我之前帖子的引用。

我的2个答案的组合应该能够完成你想要的。我为第一次没有给出正确答案而道歉，但我仍然是编程和本网站的新手。我将来会努力做得更好。我希望这次你能成功地获得并设置div的大小。

- 编辑 -

我上一篇文章中的代码：

function getHeight(id)
{
    if(document.getElementById(id) == null) //simply a guard that returns 0 if a wrong ID is stated. In reality the return statement is enough.
        return Number(0);
    else
    return document.getElementById(id).offsetHeight; // Change to .offsetWidth to gain width :)
}

function getWidth(id)
{
    return document.getElementById(id).offsetWidth;
}

- 结束编辑 -

Molle

用nicedit编辑后查找内容的高度和宽度

3 个答案: