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？）

回答

相关问题