Jquery寫入可拖動div內

Question

我正在使用Jquery UI庫。我想在單擊時給出可拖動div內寫入文本的功能。我想當用戶單擊div時，光標應該出現，用戶可以在其中寫入文本。

請建議解決方案與工作代碼示例。

這是示例代碼： -

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

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

Answer 1

我進一步建立在傑西的解決方案，調換的textarea回一個段落時，文本區域失去焦點。這確保您可以在編輯其內容後拖動div。

結賬the fiddle！

Answer 2

您可以在拖動容器中添加一個文本，並顯示在點擊：

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(); 
}); 

另一種選擇將動態添加textarea：

http://jsfiddle.net/ZrHHb/

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

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

    replace.hide();  
});