Cómo hacer que un div sea satisfactorio y se pueda arrastrar

Question

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

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

Solo puedo arrastrar este div pero ¿cómo puedo editarlo (por ejemplo, al hacer doble clic en la propiedad editable se activa y al hacer clic se vuelve a activar)?

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

Otra opción es pasar la .draggable ({mango: "handleDiv"}), que le permite mantener pueda arrastrar en todo el tiempo, así como permitiendo la edición contenteditable. Simplemente haz tu div arrastrable con dos divs adentro: el handle, y tu div satisfactorio.

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

Esta es la DEMO: http://jsfiddle.net/UH9UE/222/.