I call a javascript function that dynamically builds <li>'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?

function addField(type){
  var html = '';
  html += '<li class="ui-state-default">';
  if(type == 'text'){
   html += '<b>Text Field</b><br />';
   html += 'Field Name: <input type="text" name="text" id="text">&nbsp;&nbsp;&nbsp;';
   html += 'Field Size: <select name="textSize" id="textSize' + fRank + '"><option value="small">Small</option><option selected value="medium">Medium</option><option value="large">Large</option><option value="large2">Large 2 Lines</option><option value="large3">Large 3 Lines</option><option value="large4">Large 4 Lines</option></select>';
  }
  html += '</li>';
  $("#sortableFields").append(html);

  $(function() {
       $( "#sortableFields" ).sortable({
      revert: true
    });
    $( "#draggable" ).draggable({
           connectToSortable: "#sortableFields",
    helper: "clone",
    revert: "invalid",
    cancel: ':input,option'
    });
    $( "ul, li" ).disableSelection();  
             });
}

I have played around with the cancel option but it doesn't help.

What do you suggest?

I call a javascript function that dynamically builds <li>'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?

function addField(type){
  var html = '';
  html += '<li class="ui-state-default">';
  if(type == 'text'){
   html += '<b>Text Field</b><br />';
   html += 'Field Name: <input type="text" name="text" id="text">&nbsp;&nbsp;&nbsp;';
   html += 'Field Size: <select name="textSize" id="textSize' + fRank + '"><option value="small">Small</option><option selected value="medium">Medium</option><option value="large">Large</option><option value="large2">Large 2 Lines</option><option value="large3">Large 3 Lines</option><option value="large4">Large 4 Lines</option></select>';
  }
  html += '</li>';
  $("#sortableFields").append(html);

  $(function() {
       $( "#sortableFields" ).sortable({
      revert: true
    });
    $( "#draggable" ).draggable({
           connectToSortable: "#sortableFields",
    helper: "clone",
    revert: "invalid",
    cancel: ':input,option'
    });
    $( "ul, li" ).disableSelection();  
             });
}

I have played around with the cancel option but it doesn't help.

What do you suggest?

• javascript
• jquery
• html
• jquery-ui

• What browser are you using? It works fine for me in Chrome + Firefox. It might be a z-index issue somewhere in your css, where you have an invisible div extending over the input box and preventing you to click on it. Edit: Ah, I see you can, however, not select text within the input box, or get the carot to go anywhere but the last letter - I assume that's what you mean by your question. – Herman Schaaf Commented Oct 4, 2010 at 20:59
• 1 Removing the disableSelection() line fixes the problem, and everything still works fine (in FF & Chrome). Otherwise you might opt for Pointy's answer. – Herman Schaaf Commented Oct 4, 2010 at 21:06

3 Answers 3

I think the problem is with your use of .disableSelection() for the <li> elements. Instead of doing that, put the text (stuff outside your <input>) into <span> elements, and then disable the spans

$('li > span').disableSelection();

Try this:

$('li.ui-state-default').on( 'click', 'input', function () {    
    $(this).focus();
});

It works for me.

It was good for me:

    $('input').bind('click.sortable mousedown.sortable',function(ev){
        ev.target.focus();
    });

original answer