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

Question

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>

Answer 1

While the answer provided by Krule will work, there is a usability problem. The cursor will always appear at the beginning of the editable area when clicked. This makes it impossible to select text with the mouse. The only way to jump to an area of text is to use arrow keys. I don't believe this is acceptable.

The only solution I have been able to come up with is to use a "handle" for dragging:

<style>
.positionable {
    position:absolute;
    width:400px; height:200px;
}
.drag_handle {
    position:absolute;
    top:-8px; left:-8px;
    background-color:#FFF; color:#000;
    width:14px; height:14px;
    cursor:move;
    font-size:14px; line-height:14px;
    font-weight:bold;
    text-align:center;
    border:1px solid #000;
}
.editable {
    outline:none;
    width:100%; height:100%;
}
</style>

<div class="positionable">
    <div class="drag_handle">+</div>
    <div class="editable" contentEditable="TRUE">type here...</div>
</div>

<script>
    $('.positionable').draggable({handle: '.drag_handle'});
</script>

Answer 2

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