How to drag textarea and inputs using jquery

Question

I am using jQuery UI draggable to drag elements but it does not seem to work on textarea and inputs as they are focused whenever I click on them. Here is a JSbin Demo of the problem.

HTML

<textarea class="movable" placeholder="I am textarea. Try to move me"></textarea>
<h2></h2>
<div class="movable">I am a DIV. Try to move me</div>

JS

$('.movable').draggable();

I think I am missing some parameter in draggable method which can do this for me.

Answer 1

Looks like I have found solution to this problem after some googling. Posting it here to help others. Two steps needed:

1. jQuery Draggable disables draggable on input,textarea,select,button elements.
2. To override this, in draggable method, pass this { cancel: '' }

Here is working JSBin Demo

HTML

<textarea class="movable" placeholder="I am textarea. Try to move me"></textarea>
<h2></h2>
<div class="movable">I am a DIV. Try to move me</div>

JS

$('.movable').draggable({
  cancel: ''
});