javascript - 输入文本框不能用 jQuery Draggable 编辑？

Question

我调用了一个动态构建 <li> 的 javascript 函数带有文本输入框并在里面下拉。下拉菜单与 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();  
             });
}

我试过取消选项，但没有用。

你有什么建议？

Answer 1

我认为问题出在您对 .disableSelection() 的使用上对于 <li>元素。不要这样做，而是将文本(你的 <input> 之外的东西)放入 <span>元素，然后禁用跨度

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