How to drag and re-size contentEditable="true" div

Question

I am using jquery-ui drag and re-sizable with editable div.now i am facing problem editable div by default activate editing on click. drag and re-size has same function i mean on click these function also trigger.So how can i handle this problem i need when user double click on editable div than editing active.other wise re-sizable and drag-able function should work.

HTML

<div class="draggable resizable"><div id="field2" contentEditable='true'; >Company message</div></div>

JavaScript

$(function() {
$( ".resizable" ).resizable();
$(".draggable").draggable();

});

Answer 1

You could as a workaround use following snippet:

DEMO

$('div[contentEditable=true]').on('dblclick', function (e) {
    $(this).closest('.draggable').draggable("destroy");
    this.focus();
}).on('blur',function(){
    $(this).closest('.draggable').draggable();
});

It is not perfect because you need an other click to set correct position of carret for editable DIV.

Answer 2

$(".resizable").resizable();

$(".draggable").draggable({

  drag: function (event, ui) {
         ui.helper.children('#field2').blur()
        }
});

$('#field2').dblclick(function (e) {

  e.stopPropagation()

  $(this).focus(); //required because ui-draggable  makes the element unclickable
})

$('.draggable').click(function (e) {

  $(this).children('#field2').blur()
});

DEMO