Текстовое поле ввода не редактируется с помощью jQuery Draggable?

Я вызываю функцию javascript, которая динамически создает <li> с полем ввода текста и выпадающим внутри. Выпадающее меню отлично работает с jQuery Draggable, но я не могу редактировать текстовое поле ввода?

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

Я играл с вариантом отмены, но это не помогает.

Что вы предлагаете?

Ответ 1

Я думаю, проблема связана с использованием .disableSelection() для элементов <li>. Вместо этого поместите текст (материал вне вашего <input>) в элементы <span>, а затем отключите промежутки

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

Ответ 2

Попробуйте следующее:

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

Это работает для меня.

Ответ 3

Это было хорошо для меня:

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

оригинальный ответ