Question

我在input type="text"中有一个table。 https://jsfiddle.net/L0vx0hck/

＆＃13;

$('#myGrid').selectable({
  filter: ".dataItemColumn,.dataText",
  cancel: null,
  distance: 10
});

＆＃13;

td {
  padding: 5px;
  border: 1px solid black
}

.ui-selected {
  background-color: lightblue

＆＃13;

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myGrid">
  <tr>
    <td class="dataItemColumn">
      <input class="dataText" type="text" value="focusable" onclick="this.focus()" />
    </td>
    <td class="dataItemColumn">
      <input type="text" class="dataText" value="aa" />
    </td>
  </tr>
  <tr>
    <td class="dataItemColumn">
      <input type="text" value="focusable" onclick="this.focus()" />
    </td>
    <td class="dataItemColumn">
      <input type="text" value="aa" />
    </td>
  </tr>
</table>
<input type="text" value="test" />

＆＃13;

<table id="myGrid">
      <tr>
        <td class="dataItemColumn">
          <input type="text" class="dataText" value="aa" />
        </td>
      </tr>

我正在选择

$('#myGrid').selectable({
  filter: ".dataItemColumn,.dataText",
  cancel: null,
  distance: 10
});

此后无法点击input开始编辑。作为部分解决方法，我在onclick="this.focus()"上设置了input。也可以省略cancel: null。第一个选项允许仅在文本的乞讨时开始编辑，并且不允许选择文本的一部分。另一个选项提供完整的编辑功能，但不允许通过拖动文本框来开始选择。

所以我需要的是：

可以通过拖动选择文本框（或其容器td）即使在文本框上开始拖动
能够开始编辑点击文本框的任何位置

使用鼠标选择文本的一部分也很有用，但不是必需的。

Answer 1

问题是大多数jquery-ui小部件都有相同的 mouseDown 处理程序，它具有 preventDefault（）命令。虽然这对于大多数小部件都是可以的，但是稍后可以激活可选。

您可以覆盖可选择的鼠标事件并添加更多条件。根据您的要求，您有以下两个条件：

如果mousedown在输入元素上，则默认不应该是防止。
如果鼠标拖动仅在输入上发生，则可选择不应该触发拖动事件。

这样的事情会给你一些想法：

$.ui.selectable.prototype._mouseMove = function(event) {

    ...
    // you add the target vs mousedown selection condition here.
    // Baiscally if the mousedrag target is the same as mouse down target
    // And the target was an input, then you dont run mouseStart()
    if (this._mouseDistanceMet(event) && this._mouseDelayMet(event) && (this._selection !== event.target || !this._targetIsInput)) {
        this._mouseStarted =
        (this._mouseStart(this._mouseDownEvent, event) !== false);
        (this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));
    }
    ...

}

$.ui.selectable.prototype._mouseDown = function(event) {

    ....

    this._selection = event.target;
    this._targetIsInput = event.target.tagName === 'INPUT';
    if(!this._targetIsInput){
        event.preventDefault();
    }
    ...
}

https://jsfiddle.net/z1rjnspt/2/

我在这里省略了 mouseHandled 以简化，但你也可以处理它。

显然这会改变很多可选，所以如果你有一个有限的设置它可能会有效，但如果你想让这更安全，你应该创建一个新的小部件。

jQuery UI：如何在可选择的情况下保持TextBoxes可编辑（）

所以我需要的是：

1 个答案: