if i apply draggable to a div wrapper, how to i resolve the case of click dragging the child input box?

Question

I have a small segment of code:

<div>
  <input type="text" />
</div>

and want to make it draggable:

$("div").draggable();

it works if we drag the div, but if you click-drag on the textbox, a stopPropigation seems to be called (possibly from within the focus event).

How would we resolve this?

Answer 1

$("div").draggable({cancel:null});

will get it working. it removes the default flags determined by the jQuery API.

see: http://api.jqueryui.com/draggable/#option-cancel

example: http://jsfiddle.net/XPN5h/