How to make a div draggable even from a textarea within?

Question

I'm trying to have a draggable div which can also be dragged from a textarea within it.

html:

<div id="divContainer">
    <textarea id="text"></textarea>
</div>

css:

#divContainer {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#text {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 50px;
    height: 50px;
    background-color: green;
}

jquery:

$("#divContainer").draggable();

I can drag the div if I drag by clicking in the div area, but not if I click into the textarea area.

Is there a way to solve this ?

Here is the jsFiddle

Answer 1

Check Out this fiddle perfect for you

FIDDLE

Code:

HTML:

<div>
 <textarea name="ta" id="ta" cols="30" rows="10"></textarea>
</div>

CSS:

div {
 background-color:#aaa;
 padding: 4px;
 text-align: center;
 position:relative;
}

JS:

$('div').draggable({
 cancel: "ta",
 start: function (){
    $('#ta').focus();
 } ,
 stop: function (){
    $('#ta').focus();
 } 
});