Search code examples
jquerycontenteditablejquery-ui-draggable

How can I enable 'draggable' on a element with contentEditable?

I'd like to have a div that is at the same time editable and draggable, using jQuery UI. Content editability seems to work only if draggable is not enabled. Am I missing something? I'm using jQuery 1.4.4 and jQuery UI 1.8.9

JavaScript: 

$(function(){
    $('#draggable').draggable();
});

HTML: 

<div contenteditable="true" id="draggable">TEXT</div>
Solution

  • It is working but the jQuery draggable is hijacking click event. You can still tab to it. This is a quick fix.

    $('#draggable').draggable().bind('click', function(){
  $(this).focus();
})