Hộp văn bản đầu vào không thể chỉnh sửa được với jQuery Draggable?

Question

Tôi gọi hàm javascript tự động tạo <li> với hộp nhập văn bản và thả xuống bên trong. Trình đơn thả xuống hoạt động tốt với Draggable của jQuery nhưng tôi không thể chỉnh sửa hộp văn bản đầu vào?

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

Tôi đã phát xung quanh với tùy chọn hủy nhưng không hiệu quả.

Bạn đề xuất điều gì?

Answer 1

Tôi nghĩ rằng vấn đề là khi bạn sử dụng .disableSelection() cho các yếu tố <li>. Thay vì làm điều đó, đặt văn bản (thứ bên ngoài <input> của bạn) vào <span> yếu tố, và sau đó vô hiệu hóa các nhịp

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

Answer 2

Hãy thử điều này:

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

Nó làm việc cho tôi.

Answer 3

Đó là tốt cho tôi:

 

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

original answer