Я использую событие 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>