CODEWITHSUNDEEP
jqueryjquery-uitextareajquery-ui-draggable
Sachin Jain
Sachin Jain

Reputation: 21842

How to drag textarea and inputs using jquery

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.

Upvotes: 0

Views: 3230

Answers (1)

Sachin Jain
Sachin Jain

Reputation: 21842

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: ''
});

Upvotes: 2

Related Questions