divをcontenteditableとdraggableにする方法

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の2つのdivであなたのdraggable 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'); 
}); 

これはデモです：http://jsfiddle.net/UH9UE/222/。