Пользовательский интерфейс jQuery: как сохранить текстовые поля редактируемыми, когда они доступны ()

Question

У меня есть input type="text" в table, https://jsfiddle.net/L0vx0hck/

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

td {
  padding: 5px;
  border: 1px solid black
}

.ui-selected {
  background-color: lightblue

<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" />

<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, что и команда protectDefault(). Хотя это нормально для большинства виджетов, это правда, что selectable может быть активирован чуть позже.

Вы можете переопределить события мыши для выбора и поставить больше условий. На основании ваших требований у вас есть эти 2 условия:

• если mousedown находится на элементе input, значение по умолчанию не должно быть предотвращено.
• если перетаскивание мыши происходит только на входе, выбираемое событие перетаскивания не должно запускаться.

Нечто подобное должно дать вам несколько идей:

$.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/

Я упустил указатель мыши для упрощения, но вы можете справиться и с этим.

Очевидно, что это сильно меняет выбор, поэтому, если у вас ограниченный набор, он может работать, но если вы хотите сделать это безопаснее, вам, возможно, следует создать новый виджет.