How to drag a div if someone clicks on input in a drag and drop?

Question

I have the following html and js (see jsfiddle below).

I have a jquery binding event binding to dom ready for .control-group.

If the user clicks and drags anywhere except the input (inside the div), they can drag the div as expected, but if they click on the input, it selects the input for text input (and does not allow us to drag it).

I want the user to be able to click NOTHING on the div, and the div should be dragged.

<div class="control-group">
    <label class="control-label" for="textInput">Text Input</label>
    <div class="controls">
        <!-- If someone clicks on this input, the whole div should still be draggable -->
        <!-- Its ok if the input is not usable, thats the point!, Its just for show -->
        <input id="textInput" name="textInput" type="text" placeholder="placeholder"/>
        <p class="help-block">you have an error!</p>
    </div>
</div>

jQuery (Dom Ready):

$('.control-group').draggable();

So, I am looking for an event for the "bubble" before the div .control-group. (If I got it right ?!)

Check out the JSFiddle here: http://jsfiddle.net/8stpE/

Answer 1

:

$('.control-group').draggable( { cancel : " " } );

, draggable ,