title: Input text box not editable with jQuery Draggable?
body: <p>I call a javascript function that dynamically builds <code>&lt;li&gt;</code>'s with a text input box and drop down inside.  The drop down works fine with jQuery's Draggable but I cannot edit the input text box?</p>
  
  <pre><code>function addField(type){
    var html = '';
    html += '&lt;li class="ui-state-default"&gt;';
    if(type == 'text'){
     html += '&lt;b&gt;Text Field&lt;/b&gt;&lt;br /&gt;';
     html += 'Field Name: &lt;input type="text" name="text" id="text"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;';
     html += 'Field Size: &lt;select name="textSize" id="textSize' + fRank + '"&gt;&lt;option value="small"&gt;Small&lt;/option&gt;&lt;option selected value="medium"&gt;Medium&lt;/option&gt;&lt;option value="large"&gt;Large&lt;/option&gt;&lt;option value="large2"&gt;Large 2 Lines&lt;/option&gt;&lt;option value="large3"&gt;Large 3 Lines&lt;/option&gt;&lt;option value="large4"&gt;Large 4 Lines&lt;/option&gt;&lt;/select&gt;';
    }
    html += '&lt;/li&gt;';
    $("#sortableFields").append(html);
  
    $(function() {
         $( "#sortableFields" ).sortable({
        revert: true
      });
      $( "#draggable" ).draggable({
             connectToSortable: "#sortableFields",
      helper: "clone",
      revert: "invalid",
      cancel: ':input,option'
      });
      $( "ul, li" ).disableSelection();  
               });
  }
  </code></pre>
  
  <p>I have played around with the cancel option but it doesn't help.</p>
  
  <p>What do you suggest?</p>