Nie można edytować pola tekstowego tekstu za pomocą narzędzia jQuery Draggable?

Question

Wywołuje funkcję javascript, która dynamicznie buduje <li> za pomocą pola wprowadzania tekstu i rozwijana w środku. Upuszczanie działa dobrze z funkcją przeciągania jQuery, ale nie mogę edytować pola tekstowego wejściowego?

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(); 
      }); 
} 

Grałem z opcją anulowania, ale to nie pomaga.

Co sugerujesz?

Answer 1

Myślę, że problem polega na używaniu elementów .disableSelection() dla elementów <li>. Zamiast robić to, umieścić tekst (rzeczy poza <input>) do <span> elementów, a następnie wyłączyć przęseł

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

Answer 2

Spróbuj tego:

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

to działa na mnie.

Answer 3

To było dobre dla mnie:

 

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

original answer