移动设备上的 jQuery 插件 tableDnD答案

【问题标题】：jQuery plugin tableDnD on mobile devices移动设备上的 jQuery 插件 tableDnD
【发布时间】：2022-08-05 18:06:18
【问题描述】：

我正在使用 jQuery 插件表DnD在某些包含 HTML 表格的网页上成功。

在常规显示器上，一切正常，但触摸屏设备上的 tableDnD 会导致实际想要滚动的用户无意中移动表格行。

如果 HTML 表格高于触摸屏视口，则用户可能会尝试通过向上滑动来滚动。然而，因此他无意中移动了表格的一行。

有没有人有这个问题的解决方案？

欢迎来到堆栈溢出。请提供一个最小的、可重现的示例：stackoverflow.com/help/minimal-reproducible-example 您可能还想咨询插件供应商，看看他们是否有关于这个主题的任何更新或讨论。我发现了这个：github.com/isocra/TableDnD/issues/98

标签： jquery tablednd

【解决方案1】：

您也许可以指定一个dragHandle 并且只使一列可拖动？然后表格的其余部分将像以前一样工作，您的用户将能够滚动。

看看https://github.com/isocra/TableDnD/blob/master/index.html#:~:text=%3Ch2%3E-,Identify%20rows,-%3C/h2%3E

【讨论】：

是的，我已经这样做了。只有表格的第一列可以使用拖放来移动。但这不是一个安全的解决方案

【解决方案2】：

我放置了一个复选框来激活或停用排序模式。

$("#enableRowSort").click(function() { // checkbox
   url = window.location.href;
   url = url + "&enableRowSort=" + $(this).prop("checked");
   window.location.href = url;
});

PHP代码：

if ( $_REQUEST["enableRowSort"] ) {
   $checked = "checked";
   $title = "Deactivate sort mode";
   $enableRowSort = true;
} else {
   $checked = "";
   $title = "Activate sort mode";
   $enableRowSort = false;
}
$checkbox = "<input type='checkbox' id='enableRowSort' name='enableRowSort' ".$checked.">";
$checkbox .= "<label for='enableRowSort' title='".$title."'> Sort using Drag & Drop</label>";

if ( $enableRowSort ) {
    $js = "<script>
    $js .= '$("table").tableDnD();'
    $js .= "</script>";
} else $js = ";

echo $checkbox;
echo $js;

这是我的代码的简化版本。它没有经过测试，因为真正的代码是我框架的一部分。

【讨论】：