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 so

Answer 1

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

Answer 2

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 3

you can give this div a 'parent div' and add draggable event to it parent. then use offical API 'cancel'

HTML：

<div id="draggable">
    <div contenteditable="true" class="editable">TEXT</div>
</div>

JS:

 $('#draggable').draggable({cancel: '.editable'});

Answer 4

This has driven me nuts - but there's a way to do it without a drag handle. Use a different tag for your editable element, and prevent that element from being dragged http://api.jqueryui.com/draggable/#option-cancel