Question

I am trying to make a textarea draggable and resizable using Jquery. I referred to similar question asked here on Stackoverflow at Is a draggable and resizable textbox/textarea possible using jQuery?.

HTML for textarea

    <div id="text1" style="margin-left:100px; width:190px; height:50px; ">
    <form>
    <textarea id='ta1' style="width:180px; height:15px" class='property'>Right click to enter      text</textarea>
</form>
</div>

I am able to make the textarea draggable by closing it in a div and making the div draggable and I make the text area resizable as follows:

   $( "#ta1" ).resizable( { cancel: '' } );
     $( "#text1" ).draggable( { cancel: '' } );
     $('#ta1').focus(function() {
     $(this).text('');
     });

The only issue is that I cannot enter text into the textarea by normal left click. The only way to enter text in the textarea is right click (I disabled context menu on right click). Can anyone explain why this is the case? How can I enable entering of text using normal left click?

My code is here at – http://jsbin.com/iboxoy/61/edit#javascript,html

Thanks,
Shan

Answer 1

The left click is being highjacked by the draggable plugin. If you define a handle to drag you should be fine.