CODEWITHSUNDEEP
javascriptjqueryhtmljquery-draggable
unni
unni

Reputation: 2991

Select text in Content editable div which is jquery draggable

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?

Upvotes: 1

Views: 3219

Answers (1)

Adil Shaikh
Adil Shaikh

Reputation: 44740

Try something like this:

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

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

Fiddle

Upvotes: 6

Related Questions