Событие Touchmove не получает правильный элемент для этого объекта в браузере Chrome - PullRequest
0 голосов
/ 07 февраля 2019

Я использую событие touchmove для перетаскивания в таблице в моем приложении.Когда он работает на компьютере, он выбирает правильно с событием mouseover.

Однако, когда дело доходит до iPad, он ничего не выбирает.Когда я углубился в это, я обнаружил, что $(this) не обновляет текущий элемент сенсорного перемещения, а не указывает на элемент, с которого он начинается.

var table = $("#table");

var isMouseDown = false;
var startRowIndex = null;
var startCellIndex = null;

var de = 1;

function selectTo(cell) {
  var row = cell.parent();
  var cellIndex = cell.index();
  var rowIndex = row.index();

  var rowStart, rowEnd, cellStart, cellEnd;

  if (rowIndex < startRowIndex) {
    rowStart = rowIndex;
    rowEnd = startRowIndex;
  } else {
    rowStart = startRowIndex;
    rowEnd = rowIndex;
  }

  if (cellIndex < startCellIndex) {
    cellStart = cellIndex;
    cellEnd = startCellIndex;
  } else {
    cellStart = startCellIndex;
    cellEnd = cellIndex;
  }

  for (var i = rowStart; i <= rowEnd; i++) {
    var rowCells = table.find("tr").eq(i).find("td");
    for (var j = cellStart; j <= cellEnd; j++) {
      rowCells.eq(j).addClass("selected");
    }
  }
}

table.find("td").on("mousedown touchstart", function(e) {
    isMouseDown = true;
    var cell = $(this);

    table.find(".selected").removeClass("selected"); // deselect everything
    cell.addClass("selected");
    startCellIndex = cell.index();
    startRowIndex = cell.parent().index();
    return false; // prevent text selection
  }).on("mouseover touchmove", function() {
    if (!isMouseDown) return;
    table.find(".selected").removeClass("selected");
    selectTo($(this));
  })
  .bind("selectstart", function() {
    return false;
  });

$(document).on("mouseup touchend ", function() {
  isMouseDown = false;
});
table td {
  border: 1px solid #999;
  width: 80px;
  height: 40px;
  margin: 10px;
}

td.selected {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...