How to make a div contenteditable and draggable

Question

Text to edit


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

I can only drag this div b

Answer 1

Another option is to pass the .draggable({ handle: "handleDiv" }) which allows you to keep draggable on all the time as well as allowing contenteditable editing. Just make your draggable div with two divs inside: the handle, and your contenteditable div.

API documentation

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

$("#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');
});

This is the DEMO : http://jsfiddle.net/UH9UE/222/.

Answer 4

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

DEMO