Question

我已编写代码（如下）以便能够将输入字段拖到另一个字段上，但似乎可拖动吞下input[text].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>

Answer 1

将元素包含在div或span中（取决于哪个有效）并在其上应用可拖动事件。

Jquery draggable使输入文本字段不可编辑（吞下onfocus？）

1 个答案: