how to drag the blue form in the red div using jquery-ui.

Question

this is my code :

<div id="test" style="width:200px;height:100px;background:red" class="tabs change_font_size">
      <div>
          <a class="delete" style="float:right;font-size:20px;text-decoration:underline;cursor:pointer;">delete</a>
          <form action="/" style="background:blue">
              <input type="text" name="text"/>
              <input type="submit" value="submit"/>
          </form>
      </div>
  </div>

$('#test').draggable()

you can run this code in this http://jsfiddle.net/8vntr/1/

i can drag the red div, but i can't drag the blue form ,

what can i do ?

thanks

Answer 1

Putting the form tag outside the draggable div seems to work.

<form action="/">
<div id="test" style="width:200px;height:100px;background:red" class="tabs change_font_size">
      <div>
          <a class="delete" style="float:right;font-size:20px;text-decoration:underline;cursor:pointer;">delete</a>
          <div>
              <input type="text" name="text"/>
              <input type="submit" value="submit"/>
          </div>
      </div>
  </div>
</form>

Answer 2

set the form height and width to 0 :

           <form action="/" style="background:blue,width:0;height:0;">
            <input type="text" name="text"/>
            <input type="submit" value="submit"/>
        </form>