jQuery draggable option disable layout

Question

I got this code from the net:

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

<script>
var draggableDiv = $('#draggable').draggable();

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

The code: http://jsfiddle.net/cSMYG/1/

How can I change the default event when I click and hold down the cursor on the text field and then while holding down, hover out of the text field, will make the text field not grey? I know what's causing it but I can't make a workaround.

Answer 1

You need to attach the mouseup event handler on an ancestor element. For example:

$(document).mouseup(function(ev) {
     draggableDiv.draggable('enable');
});

jsFiddle

You may also want to keep track of whether it's disabled in a variable, and then check that before enabling it on every mouseup event:

var isDraggableEnabled = ...