Take the 2-minute tour ×

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:

    if ( $(this).is('.ui-draggable-dragging') ) {
    $(this).draggable( "option", "disabled", true );
    $(this).draggable( 'option', 'disabled', 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.

share|improve this question
add comment


Your Answer



Browse other questions tagged or ask your own question.