如何使jquery插件bigtext可拖动和可编辑

时间:2012-12-08 21:30:06

标签: javascript jquery draggable contenteditable

通过这个论坛搜索是非常宝贵的,但我现在有一个问题,我找不到任何答案,我是jQuery和javascript的新手,或任何编码,所以请耐心等待我,我会试着解释一下尽可能清楚。

我正在尝试使用jquery插件bigtext创建一个文本框,我需要文本框可以拖动并且能够由用户编辑并在每个keyup上更新文本。文本框将具有设置的宽度。

在此论坛上使用过去的一些答案我已经能够创建一个可拖动的文本框但是当用户输入文本时,bigtext插件不再有效,并且不会调整文本高度以适应宽度

HTML

<div id="d" >
<div id="e" contenteditable="true">edit me</div>
</div>

JS

$("#d").draggable()
.click(function () {
$(this).draggable({
    disabled: false
});
}).dblclick(function () {
$(this).draggable({
    disabled: true
});
});
$("#d").bigtext(); 

CSS

#d {

width:300px;
border: 1px dashed;
}​

http://jsfiddle.net/grhm/r6GSS/3/

我还可以创建一个文本框,用户在其中输入文本并输出到另一个框,bigtext插件在输出文本框中工作但是当我尝试使框可拖动时它停止工作

HTML

Enter text Here <input id="input" value="Edit This">
<div id="Mainbox" style="width:300px;border:1px dashed">
<div id="preview">Edit This</div>
</div> 

JS

$(function () {

var update = function () {
    $(" #preview").text($("#input")[0].value);
    $("#Mainbox").bigtext().draggable();
    }
    $("#input").on("keyup", update)
    update();
});

http://jsfiddle.net/TgafU/4/

任何帮助将不胜感激。

0 个答案:

没有答案