Jquery draggable使輸入文本字段不可編輯（燕子onfocus？）

我已經編寫代碼（下面）能夠將輸入字段拖到另一個上，但似乎可拖動的吞下input[text].onfocus。Jquery draggable使輸入文本字段不可編輯（燕子onfocus？）

這會導致問題，所有可拖動的輸入字段都會被禁用（firefox），並且單擊鼠標不會將其聚焦。如果我使用TAB鍵將注意力集中在輸入字段上，我可以編輯輸入字段，但我必須遍歷所有必需的製表符索引。

所以它似乎可拖動吞下input[text].onfocus鼠標事件。

有沒有辦法在綁定時解決這個問題？

<head> 
    <script type="text/javascript" src="/js/jquery.js"></script> 
    <script type="text/javascript" src="/js/jquery-ui.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() 
    { 
    $("#drag-table tr td input").draggable({helper: 'clone', revert: 'invalid', cancel: null, cursor: 'move', addClasses: false, containment: $("#drag-table"), handle: 'h2', opacity: 0.8, scroll: true }); 
    $("#drag-table tr td input").droppable({ 
     addClasses: false, 
     drop: function(ev, ui) { 
     alert('value='+ ui.draggable.val() + ", text=" + ui.draggable.text() + " and deeper=" + ui.draggable[0].value); 
     $(this).insertAtCaret(ui.draggable.val()); 
     ui.draggable.val(null); 
     $(this).trigger('change'); 
     } 
    }); 
    }); 

    $.fn.insertAtCaret = function (myValue) { 
    return this.each(function(){ 
     //IE support 
     if (document.selection) { 
      this.focus(); 
      sel = document.selection.createRange(); 
      sel.text = myValue; 
      this.focus(); 
     } 
     //MOZILLA/NETSCAPE support 
     else if (this.selectionStart || this.selectionStart == '0') { 
      var startPos = this.selectionStart; 
      var endPos = this.selectionEnd; 
      var scrollTop = this.scrollTop; 
      this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length); 
      this.focus(); 
      this.selectionStart = startPos + myValue.length; 
      this.selectionEnd = startPos + myValue.length; 
      this.scrollTop = scrollTop; 
     } else { 
      this.value += myValue; 
      this.focus(); 
     } 
    }); 
    }; 
    </script> 
    </head> 
    <body> 

    <table border="1" cellspacing="10" cellpadding="10" id="drag-table"> 
    <tr> 
    <td><input type="text" name="1x1y" id="id1x1y" value="text" onfocus="alert('onfocus swallowed?');"/></td> 
    <td><input type="text" name="2x1y" id="id2x1y" onchange="alert('hello');"/></td> 
    </tr> 
    <tr> 
    <td><input type="text" name="1x2y" id="id1x2y" value="next"/></td> 
    <td><input type="text" name="2x2y" id="id2x2y"/></td> 
    </tr> 
    </table> 

    </body>

來源

2009-11-08 Martin

將元素換成div或span（取決於哪個是有效的），然後在其上應用可拖動事件。

來源

2009-11-08 06:46:49

對我不起作用 – bonez 2013-10-09 21:38:58

Jquery draggable使輸入文本字段不可編輯（燕子onfocus？）

回答

相關問題