2010-10-04 20 views
10

Bir metin giriş kutusuyla <li>'leri dinamik olarak oluşturan ve içeride açılan javascript işlevini çağırıyorum. Açılan aşağı jQuery's Draggable ile çalışır, ancak giriş metin kutusunu düzenleyemem?Girdi metin kutusu, jQuery Sürüklenebilir ile düzenlenemez mi?

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

iptal seçeneği ile etrafında oynamıştır ama yardımcı olmuyor.

Önerileriniz nelerdir?

+0

kullandığınız hangi tarayıcı? Chrome + Firefox'ta benim için iyi çalışıyor. Css'inizde, giriş kutusunun üzerinde görünmez bir görünüme sahip olduğunuz ve onu tıklatmanızı önleyen bir z dizini sorunu olabilir. Düzenleme: Ah, görüyorsunuz, ancak, giriş kutusunun içinde metin seçemezsiniz, ya da bir yere gitmek için carot olsun, ama son mektubu - Ben senin sorunun ile demek istediğini varsayalım. –

+1

disableSelection() satırının kaldırılması sorunu giderir ve her şey düzgün çalışır (FF ve Chrome'da). Aksi halde, Pointy'nin cevabını tercih edebilirsiniz. –

cevap

16

Sorun, <li> öğeleri için .disableSelection() kullanımınızla ilgili olduğunu düşünüyorum. Bunun yerine yapmanın, <span> unsurları içine (sizin <input> dışında şeyler) Metin koymak ve sonra

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

bu deneyin kapsamlarını devre dışı bırakın:

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

Bana uyar.

+0

Benim için bile disableSelection() işe yaramadı ama girişe odaklanmak bir cazibe gibi çalıştı! – Redips77

+0

Daha pratik bir çözüm belki sorucu kullanıcının ** iptal ** ayarını kullanmak istediği kullanıcı olarak kullanmaktır, belki de yanlış bir şekilde yaptı (ben onun problemini ve kodunu incelemedim). ?) – Redips77

+0

@ Redips77 Ben de seçeneklerimde iptal kullanıyordum ve hiç işe yaramadı. Tıklama benim için çözüm olduğu zaman odağı girişe zorlamak. +1 – RaphBlanchet

0

Benim için iyi oldu:

 

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

original answer

İlgili konular