Cuadro de texto de entrada no editable con jQuery ¿Arrastrable?

Llamo a una función de Javascript que construye dinámicamente <li> con un cuadro de entrada de texto y desplegable dentro. El menú desplegable funciona bien con jQuery's Draggable pero no puedo editar el cuadro de texto de entrada?Cuadro de texto de entrada no editable con jQuery ¿Arrastrable?

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

He jugado con la opción de cancelar pero no ayuda.

¿Qué es lo que sugiere?

Fuente

2010-10-04 Mitchell Guimont

¿Qué navegador está usando? Funciona bien para mí en Chrome + Firefox. Puede ser un problema de índice Z en algún lugar de su CSS, donde tiene un div invisible que se extiende sobre el cuadro de entrada y le impide hacer clic en él. Editar: Ah, veo que puedes, sin embargo, no seleccionar texto dentro del cuadro de entrada, o hacer que el carot vaya a ninguna parte excepto la última letra. Supongo que eso es lo que quieres decir con tu pregunta. –

Al eliminar la línea disableSelection() se soluciona el problema y todo funciona bien (en FF y Chrome). De lo contrario, puede optar por la respuesta de Pointy. –

Creo que el problema es con el uso de .disableSelection() para los elementos <li>. En vez de hacer eso, poner el texto (cosas fuera de su <input>) en <span> elementos, y luego desactivar los tramos

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

Fuente

2010-10-04 20:54:14 Pointy

Prueba esto:

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

que funciona para mí.

Fuente

2013-05-16 16:20:21 kecco

¡Incluso para mí disableSelection() no funcionó, pero enfocar la entrada funcionó como un amuleto! – Redips77

Una solución más práctica tal vez es usar la configuración de ** cancelar ** del widget ordenable como ya lo hizo el usuario que pregunta, tal vez lo ha hecho de forma incorrecta (no he estudiado su problema y código) ... (?) – Redips77

@ Redips77 Estaba usando cancelar en mis opciones también, y nunca funcionó. Forzar el foco en la entrada cuando el clic ha sido la solución para mí. +1 – RaphBlanchet

que era bueno para mí:

 

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

original answer

Fuente

2015-04-15 07:24:42

Cuadro de texto de entrada no editable con jQuery ¿Arrastrable?

Respuesta

Cuestiones relacionadas