Draggable Div with a textarea in it. Drag problem

I have a div with a textarea in it. The main div is draggable and works fine, but I'm unable to drag the div while clicking on the textarea in it. Is there a way to drag the div even if I drag it from the textarea inside the div?

Here is how I make my div draggable

$('.speech_bubble').draggable(
{
      containment: $('#drop开发者_StackOverflow中文版Here')

});

Thank you

It is becuase of the cancel option of the draggable. The default is ':input,option', that means that starting the drag from the textarea will be cancelled. Try playing with that option.

Try adding the following styles:

div {
    padding-bottom:20px;
}

textarea {
    width:100%;
    height:100%
}

You can then drag the textarea while you drag on the bottom side of the div tag.

You can try creating a screen (Invisible div) over the textarea using the onmouseover event, then detect if the user wants to edit the text by removing the screen via double click event.

I know this is a very old question, but I thought it would be better to answer the exact question I had just been working on (i.e. instead of creating a new one). The answer refers to dioslaska's solution of clearing the cancel attribute with adding one additional .focus() call on the intended textarea inside your event handler (say a click). I used a double click in my solution to differentiate from simply moving my object.

For selection:

Currently it looks like there is a bug (http://bugs.jqueryui.com/ticket/4986). For a workaround, in the event handler disable the draggable by using destroy, and in the blur() (or other disabling event handler) function recreate the draggable.