如何讓一個div CONTENTEDITABLE和拖動

Question

<div contenteditable="true" id="d"> 
<span>Text to edit</span> 
</div> 

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

我只能拖到這個div但我怎麼可以對其進行編輯（就像雙擊編輯屬性變得活躍和點擊拖動被激活）？

Answer 1

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

DEMO

Answer 2

<div contenteditable="true" id="d"> 
<span>Text to edit</span> 
</div> 

$(function(){ 
$("#d").click(function() { 
$("#d").draggable();  
}); 

$("#d").dblclick(function(){ 
see here for this functionality http://stackoverflow.com/questions/2441565/how-do-i-make-a-div-element-editable-like-a-textarea-when-i-click-it 
}); 
}); 

Answer 3

另一種方法是通過.draggable（{手柄： 「handleDiv」}），它可以讓你保持可拖動所有的時間，以及允許contenteditable編輯。只需讓你的可拖動的div裏面有兩個div：手柄和你的contenteditable div。

API documentation

Answer 4

$("#d") 
.draggable() 
.click(function(){ 
    if ($(this).is('.ui-draggable-dragging')) { 
     return; 
    } 
    $(this).draggable("option", "disabled", true); 
    $(this).attr('contenteditable','true'); 
}) 
.blur(function(){ 
    $(this).draggable('option', 'disabled', false); 
    $(this).attr('contenteditable','false'); 
}); 

這是DEMO：http://jsfiddle.net/UH9UE/222/。