2

我的网站中有一个 jquery 函数，它需要一个带有可变文本的 DIV 才能编辑、拖动和调整大小，但是，在我更改 DIV 的内容后，DIV 失去了调整大小的能力。
我希望有人可以帮助我，这里是代码：

HTML

<form id="myform">
        <select id="fs"> 
        <option value="Arial">Arial</option>
        <option value="Verdana ">Verdana </option>
        <option value="Impact ">Impact </option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>

    <select id="size">
        <option value="7">7</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>
</form>
<textarea id="txt" style="width:400px; height:100px;"></textarea>
<div id='test' >
    test
</div>

CSS

#test {
max-width: 360px;
max-height: 320px;
padding: 0;
z-index: 1000;
}
}

jQuery

$(function(){
  $('#txt').keyup(function(){
     $('#test').text($(this).val());
  });
});
$(function(){
    $("#test").resizable({
        maxHeight: 360,
        maxWidth: 320
    });
     $("#test").draggable();
});



$("#fs").change(function() {
    //alert($(this).val());
    $('#test').css("font-family", $(this).val());

});

$("#size").change(function() {
    $('#test').css("font-size", $(this).val() + "px");
});

也是一个完整的js小提琴：http: //jsfiddle.net/JTVRZ/18/

4

3 回答 3

3

有同样的问题，谷歌搜索把我带到了这里，上面的建议没有解决我的问题。

然而，它确实为我指明了正确的方向......我需要销毁控件上的原始可调整大小的引用才能重新实例化它。

$('#MyContol').resizable('destroy');
$('#MyContol').text(newtext);
$('#MyContol').resizable({ containment: $('#MyContol').parent() });

希望能帮助其他人解决这个问题。

于 2014-03-16T22:54:41.467 回答
1

您的问题正在发生，因为当您修改 div 时，您会覆盖 div 中可调整大小的句柄元素。

您可以尝试在可调整大小的 div 中创建另一个具有 100% 宽度和高度的 div 来保存内容。

于 2013-07-30T09:09:56.440 回答
0

resizable 函数在您的 div 上添加了一些标记（您可以使用 firebug 检查它）。当您替换文本时，该标记会丢失，因此您的 div 将无法调整大小。更改文本后，您应该再次调用 resizable 函数。

于 2013-07-30T09:09:32.363 回答