Input text box not editable with jQuery Draggable?
I call a javascript function that dynamically builds <li>
's with a text input box and drop down inside. The drop down works fine with jQuery's Draggable but I cannot edit the input text box?
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"> ';
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: 开发者_JAVA百科true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortableFields",
helper: "clone",
revert: "invalid",
cancel: ':input,option'
});
$( "ul, li" ).disableSelection();
});
}
I have played around with the cancel option but it doesn't help.
What do you suggest?
I think the problem is with your use of .disableSelection()
for the <li>
elements. Instead of doing that, put the text (stuff outside your <input>
) into <span>
elements, and then disable the spans
$('li > span').disableSelection();
Try this:
$('li.ui-state-default').on( 'click', 'input', function () {
$(this).focus();
});
It works for me.
It was good for me:
$('input').bind('click.sortable mousedown.sortable',function(ev){ ev.target.focus(); });
original answer
精彩评论