0

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

它也可以用 niceedit 进行编辑。

我遇到的问题是，当我在编辑模式下向 div 添加更多文本时，div 不会扩展以适应文本，并且文本会从 div 中溢出。

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

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

http://jsfiddle.net/j6FLa/20/

匹配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>
4

3 回答 3

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 来创建和调用此函数。该函数首先检查 ID 是否存在，如果不存在则返回 0。如果存在，则返回内部宽度/高度。如果您 100% 确定您要求的 ID 存在，您只需要函数的最后一行。

你可以像这样使用它：

var h = getHeight("draggable");

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

希望它有用:)

于 2013-08-06T14:46:14.083 回答
0

使用可调整大小的小部件的停止事件来获取高度 - 你遇到的问题是文本没有包装在另一个元素中如果你将文本包装在另一个元素中你可以定位该元素如果不是这里是一种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');} );
});
于 2013-08-06T15:43:40.170 回答
0

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

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

假设您的 div ID 是“可拖动的”，而您的 p ID 是“文本”。完成文本编辑后，您可以通过调用函数（定义如下）来更新宽度和高度。

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 更改任何给定 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;
}

-- 结束编辑--

  • 莫勒
于 2013-09-02T14:06:49.303 回答