CODEWITHSUNDEEP
jquerytextareadraggable
Pabuc
Pabuc

Reputation: 5638

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: $('#dropHere')

});

Thank you

Upvotes: 2

Views: 2272

Answers (4)

Alastair
Alastair

Reputation: 328

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.

Upvotes: 0

Trần Minh
Trần Minh

Reputation: 1673

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.

Upvotes: 1

istvan.halmen
istvan.halmen

Reputation: 3350

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.

Upvotes: 5

Trevor
Trevor

Reputation: 1385

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.

Upvotes: 0

Related Questions