How to make div accessible and draggable

Question

<div contenteditable="true" id="d"> <span>Text to edit</span> </div> $("#d").draggable(); 

I can only drag this div, but how can I edit it (for example, when editing a property, doubleclick becomes active, and when you drag a click, it is activated)?

Answer 1

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

Demo

Answer 2

 $("#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 a DEMO: http://jsfiddle.net/UH9UE/222/ .

Answer 3

Another option is to pass .draggable ({handle: "handleDiv"}), which allows you to constantly drag and drop and allow editing of content. Just make your draggable div with two divs inside: the handle and your contenteditable div.

API Documentation

Answer 4

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