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

Я вызываю функцию javascript, которая динамически создает <li> с текстовым полем ввода и выпадающим внутри. Выпадающее меню отлично работает с DragGable jQuery, но я не могу редактировать текстовое поле ввода?Текстовое поле ввода не редактируется с помощью 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(); 
      }); 
}

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

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

источник

2010-10-04 Mitchell Guimont

Какой браузер вы используете? Он отлично работает для меня в Chrome + Firefox. Это может быть проблема z-index где-то в вашем css, где у вас есть невидимый div, расширяющийся над полем ввода и не позволяющий вам щелкнуть по нему. Редактировать: Ах, я вижу, вы можете, однако, не выбирать текст в поле ввода, или заставить кароту идти куда угодно, кроме последней буквы. Я предполагаю, что это то, что вы имеете в виду под своим вопросом. –

Удаление строки disableSelection() устраняет проблему, и все по-прежнему работает нормально (в FF и Chrome). В противном случае вы можете выбрать ответ Пути. –

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

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

источник

2010-10-04 20:54:14 Pointy

Попробуйте это:

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

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

источник

2013-05-16 16:20:21 kecco

Даже для меня disableSelection() не работает, но фокусировка ввода работает как шарм! – Redips77

Более практичным решением может быть использование настройки ** cancel ** сортируемого виджета, как уже спрашивал пользователь, возможно, он сделал это неправильно (я не изучал его проблему и код) ... (?) – Redips77

@ Redips77 Я тоже использовал отменить в своих опциях и никогда не работал. Нажатие фокуса на ввод, когда щелчок был решением для меня. +1 – RaphBlanchet

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

 

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

original answer

источник

2015-04-15 07:24:42

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

ответ

Смежные вопросы