How to make a DIV draggable without interfering with its contenteditable property?

How to make a DIV draggable without interfering with its contenteditable
property?

I have a contenteditable DIV, which I want to make draggable using the
"jQuery UI draggable" plugin. However, with this plugin, the
contenteditable attribute doesn't work. (It looks like the focus event is
chocked or something.)
I did some research and found the following suggestions on Stack Overflow:
$("#d")
.ds=raggable()
.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');
});
The problem with this solution is, that the user has to click twice on the
DIV if they want to edit it - which might get annoying after some time. If
I add $(this).focus(); at the end of the click event, the caret appears
already after the first click, however at the beginning of the DIV and not
at the current cursor position. Is it possible to make draggable not
interfere with the contenteditable attribute as long as no mousemove event
(and thus no dragging) happens? I don't want to mess around with the
functions in jQuery UI code since I'm note familiar with it, but the
logical sequence of actions should be something like this:
Dragging: 1. mousedown 2. mousemove 3. mouseup
Editing: 1. mousedown 2. mouseup
In conclusion, if no mousemove is registered by jQuery UI draggable, all
functions should work just as if the element wasn't draggable. If the
element isn't actually dragged, the plugin shouldn't interfere with other
functions.