Select text in Content editable div which is jquery draggable

Question

I have a contenteditable div which is a child of another div which is made into a draggable element using jquery.

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

$('#draggable').draggable({revert:true});

The problem I am facing is that none of the default mouse actions like selecting pieces of text etc are disabled. Moreover if I try to select some text it just drags the whole div. I tried some thing like this:

$('#editable').mousemove(function(event){
  event.stopPropogation();
})

but this just prevents any mouse drag action. It also prevents text selection. How can we enable all content editing mouse actions for the child content editable while keeping the draggable on the parent?

Answer 1

Try something like this:

var draggableDiv = $('#draggable').draggable();

$('#editable', draggableDiv).mousedown(function(ev) {
     draggableDiv.draggable('disable');
}).mouseup(function(ev) {
     draggableDiv.draggable('enable');
});

Fiddle