jquery - Jquery 在可拖动的 div 中写入

Question

我正在使用 Jquery UI 库。我想在单击时提供在可拖动 div 内写入文本的功能。我希望当用户单击 div 时，应该出现光标并且用户可以在其中写入文本。

请使用工作代码示例建议解决方案。

这是示例代码：-

<script>
      $(function() { 
             $( "#dv1" ).draggable();    
         });
</script>

<div id="dv1">
<p>Drag me around</p>
</div>

Answer 1

我进一步构建了 Jesse 的解决方案，当 textarea 失去焦点时，将 textarea 换回一个段落。这确保您可以div在编辑其内容后拖动。

看看小提琴！

Answer 2

您可以在可拖动容器中添加一个 textarea 并在单击时显示它：

http://jsfiddle.net/GwTt3/

<div id="dv1">
    <p>Drag me around<textarea></textarea></p>
</div>​

​#dv1 p textarea{
 display: none;   
}​

$("#dv1").draggable(); 
$('p').on('click', function(){
   $(this).find('textarea').show(); 
});

​另一种选择是动态添加文本区域：

http://jsfiddle.net/ZrHHb/

$( "#dv1" ).draggable();

$('p').on('click', function(e) {
   var replace = $(this);    
   var ele = $('<textarea>')
       .val(replace.text())
       .insertAfter(replace);

   replace.hide();    
});

​</p>