jQuery tableDnD插件移动端滚动误触行拖拽问题求解决方案

针对你遇到的触摸屏上滚动页面误触tableDnD行拖拽的问题，这里有几个实用的解决办法：

1. 给拖拽添加专属手柄元素 #

只允许通过特定的手柄触发拖拽操作，用户正常滚动页面时不会点击到手柄，从根源避免误触。tableDnD本身支持handle参数指定触发拖拽的元素：

首先在表格每行添加拖拽手柄：

<tr>
  <td><span class="drag-handle">☰</span></td>
  <td>行内容1</td>
</tr>
<tr>
  <td><span class="drag-handle">☰</span></td>
  <td>行内容2</td>
</tr>

然后初始化tableDnD时指定手柄：

$("#your-table-id").tableDnD({
  handle: ".drag-handle"
});

可以给手柄加样式让它更显眼：

.drag-handle {
  cursor: grab;
  padding: 0 8px;
  color: #666;
  user-select: none;
}

2. 通过触摸位移判断区分滚动与拖拽 #

在触摸事件中记录初始位置，当用户触摸移动时，判断纵向位移是否远大于横向位移——如果是，说明用户想滚动页面，阻止tableDnD的拖拽逻辑；反之则允许拖拽。

通过拦截触摸事件实现：

let startX, startY;
const dragThreshold = 10; // 位移阈值，可根据需求调整

$("#your-table-id tr").on("touchstart", function(e) {
  const touch = e.originalEvent.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
});

$("#your-table-id tr").on("touchmove", function(e) {
  const touch = e.originalEvent.touches[0];
  const deltaX = Math.abs(touch.clientX - startX);
  const deltaY = Math.abs(touch.clientY - startY);
  
  // 如果纵向位移远大于横向，标记为滚动操作
  $(this).data("tableDnD-noDrag", deltaY > deltaX + dragThreshold);
});

在tableDnD的拖拽开始回调中判断：

$("#your-table-id").tableDnD({
  onDragStart: function(table, row) {
    if ($(row).data("tableDnD-noDrag")) {
      return false; // 阻止拖拽触发
    }
    // 其他拖拽前逻辑
  }
});

3. 使用CSS touch-action属性优化触摸行为 #

给表格行添加touch-action: pan-y，告诉浏览器优先处理纵向滚动操作，避免触发拖拽事件：

#your-table-id tr {
  touch-action: pan-y;
}

这个方法简单高效，但需要注意兼容性（现代浏览器均支持，IE11及以下不支持）。

4. 修改tableDnD源码适配触摸事件 #

如果上面的方法都不满足需求，可以直接修改tableDnD的触摸事件处理逻辑，在源码中添加位移判断：
找到tableDnD中处理touchstart和touchmove的部分，加入类似下面的判断：

// 源码中touchstart处理
$(row).on('touchstart', function(e) {
  const touch = e.originalEvent.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
  // 保留原有的touchstart逻辑
});

// 源码中touchmove处理
$(row).on('touchmove', function(e) {
  const touch = e.originalEvent.touches[0];
  const deltaX = Math.abs(touch.clientX - startX);
  const deltaY = Math.abs(touch.clientY - startY);
  
  if (deltaY > deltaX + 10) {
    return; // 放弃拖拽逻辑，优先滚动
  }
  // 保留原有的touchmove逻辑
});

内容的提问来源于stack exchange，提问作者user4293651