Using Ace editor with JqueryUI draggable

Question

I want to make a draggable Ace editor. But the editor "sticks" to the cursor when I try to drag it. It works fine for the regular div.

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<div id='my_ace' style='position:relative; width:300; height:100'>my_ace</div>
<div id='regular' style='width:300; height:100; border: solid 1'>regular</div>

<script>
var editor = ace.edit('my_ace')
$('#my_ace').draggable()
$('#regular').draggable()
</script>

Edit: Actually, I'm only seeing this behavior in Chrome. The editor doesn't stick in Firefox.

Answer 1

Solution was to add a handle element to the editor and use that as the draggable part.

<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" type="text/javascript" charset="utf-8"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<div class='outer' style='width:300;'>
    <div id='handle' style='width:100%; height:20; background-color:grey'></div>
    <div id='with_handle' style='position:relative; height:100'>
        with_handle
    </div>
</div>

<div id='regular' style='width:300; height:100; border: solid 1'>regular</div>

<script>
ace.edit('with_handle')
$('.outer').draggable({handle: '#handle'})

$('#regular').draggable()
</script>

Making the editor itself draggable would've prevented selecting text by dragging anyway.

Answer found here: jquery ui draggable accordion stick to mouse in Chrome